Skip to content

Instantly share code, notes, and snippets.

@jonraasch

jonraasch/extrude-on-hover.html

Created May 5, 2011 14:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jonraasch/957199 to your computer and use it in GitHub Desktop.
Save jonraasch/957199 to your computer and use it in GitHub Desktop.
Download ZIP
extrude text on hover
Raw
extrude-on-hover.html
<!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>
@Mail2rohit
Copy link

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment