public
Last active

extrude text on hover

  • Download Gist
extrude-on-hover.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
<!doctype html>
<html lang="en">
<head>
 
<title>Extruding Text on Hover (example)</title>
 
<style type="text/css">
 
body {
background-color: #444;
text-align: center;
}
 
.extruded {
color: #888;
font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
position: relative;
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
 
.extruded:hover {
color: #FFF;
text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
left: -6px;
top: -6px;
}
 
</style>
 
</head>
 
<body>
 
<span class="extruded">Extrude Me</span>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.