Forked from Yair Even Or's Pen Rolling Stones.
Created
June 11, 2014 21:21
-
-
Save azzoune/5657664be2bb52121cf9 to your computer and use it in GitHub Desktop.
A Pen by azzoune.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Rolling Stones: CSS-only menu with rolling items</h1> | |
<ul> | |
<li><a href="#">CSS</a></li> | |
<li><a href="#">HTML</a></li> | |
<li><a href="#">JavaScript</a></li> | |
<li><a href="#">About</a></li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// dropthebit.com | |
// This code was created in 2011 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'Roboto Condensed'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff'); | |
} | |
html{ height:100%; font-family: 'Roboto Condensed'; } | |
body{ min-height:100%; background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); | |
background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); | |
background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); | |
background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); } | |
*{ margin:0; padding:0; } | |
body{ text-align:center; padding:20px 0; } | |
h1{ font-size:1.8em; color:#fff; margin-bottom:50px; letter-spacing:-1px; text-transform:capitalize; text-shadow:0 2px 2px rgba(0,0,0,0.6); } | |
ul{ background-color:rgba(0,0,0,0.4); border-bottom:1px solid rgba(255,255,255,0.25); box-shadow:0 0 8px rgba(0,0,0,0.4) inset; border-radius:16px; margin:0; padding:0 30px; } | |
ul > li > a{ display:inline-block; letter-spacing:-1px; text-decoration:none; text-transform:uppercase; color:#FFF; } | |
/* The effect | |
-------------------------*/ | |
ul{ display:inline-block; text-align:center; font-size:1.3em; height:50px; line-height:50px; overflow:hidden; } | |
ul > li{ float:left; height:100%; list-style:none; margin:0 30px; } | |
ul > li > a{ text-shadow:0 -50px #CDF745; padding-top:50px; margin-top:-50px; transition:0.25s cubic-bezier(0,0,.5,1.4); } | |
ul > li > a:hover{ margin-top:0;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment