Skip to content

Instantly share code, notes, and snippets.

@MichaelArestad

MichaelArestad/dabblet.css

Created April 4, 2012 00:08
Show Gist options
  • Save MichaelArestad/2296550 to your computer and use it in GitHub Desktop.
Save MichaelArestad/2296550 to your computer and use it in GitHub Desktop.
Download ZIP
font-size, line-height, and letter-spacing Animation Test
Raw
dabblet.css
/**
font-size, line-height, and letter-spacing Animation Test
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
#absolute {
width: 100%;
height: 600px;
}
#position {
font-size: 16px;
line-height: 20px;
letter-spacing: 0px;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
#absolute:hover #position {
font-size: 80px;
line-height: 140px;
letter-spacing: 30px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="absolute">
<p id="position">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment