Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created January 15, 2012 22:58
Show Gist options
  • Save anonymous/1617866 to your computer and use it in GitHub Desktop.
Save anonymous/1617866 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html{
font-family: sans-serif;
font-size:1em;
background:#eee;
}
ul{
position:relative;
margin:100px;
padding:0;
}
ul li{
display:inline;
text-align:center;
}
ul li:nth-child(1) a{width:50px;}
ul li:nth-child(2) a{width:50px;}
ul li:nth-child(3) a{width:70px;}
ul li:nth-child(4) a{width:170px;}
ul li a{
display:inline-block;
padding:5px;
color:#51C3FA;
text-decoration:none;
text-shadow:0 1px 0 white;
background-color:transparent;
transition:background-color .3s ease;
}
ul li a:hover{
background-color:rgba(255,255,255,.3);
transition:background-color .3s ease .4s;
}
ul li:last-child::after{
content:"";
position:absolute;
left:-10px;
display:block;
background:#51C3FA;
width:0px;
height:3px;
transition: all .5s ease;
}
ul li:nth-child(1):hover ~ li:last-child::after{left:0;width:60px;}
ul li:nth-child(2):hover ~ li:last-child::after{left:60px;width:60px;}
ul li:nth-child(3):hover ~ li:last-child::after{left:120px;width:80px;}
ul li:nth-child(4):hover::after{left:200px;width:180px;}
Raw
dabblet.html
<ul class="tabrow">
<li><a href="#">Lorem</a></li><!--
--><li><a href="#">Ipsum</a></li><!--
--><li class="selected"><a href="#">Sit amet</a></li><!--
--><li><a href="#">Consectetur adipisicing</a></li>
</ul>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment