Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created June 11, 2012 16:48
Show Gist options
  • Save LeaVerou/2911177 to your computer and use it in GitHub Desktop.
Save LeaVerou/2911177 to your computer and use it in GitHub Desktop.
CSS Pebbles!
/**
* CSS Pebbles!
*/
html {
background: url("http://michaeliahotel.com/img/sand.jpg");
min-height: 100%;
}
.aside-icons {
list-style: none;
float: left;
}
.aside-icons > li > a {
display: block;
min-width: 1em;
padding: 1em .8em .8em;
margin: .2em 0 .5em;
background: url("http://michaeliahotel.com/img/pebbles.jpg");
text-shadow: 0 .1em .1em hsla(0,0%,100%,.6);
font: bold 100% 'Palatino Linotype', Palatino, Georgia, serif;
text-decoration: none;
box-shadow: -.1em -.2em 1em rgba(0,0,0,.7) inset, 0 .1em .5em rgba(0,0,0,.6);
border: 1px solid rgba(0,0,0,.4);
cursor: pointer;
}
.aside-icons > li > a {
background-position: -30px 60px;
background-color: #555B5D;
color: black;
line-height: 1;
border-radius: 60% 80% / 100% 90% 60% 50%;
}
.aside-icons > li:nth-child(3n) > a {
margin-left: .3em;
background-position: -320px -60px;
background-color: #7E8379;
color: #445;
line-height: 1.2;
border-radius: 70% 50% / 70% 60%;
}
.aside-icons > li:nth-child(3n+2) > a {
margin-left: .3em;
background-position: -40px -70px;
background-color: #7e6e67;
color: #463d39;
line-height: 1.2;
border-radius: 70% 50% / 60% 70% 40%;
}
.aside-icons > li > a:hover {
color: white;
text-shadow: 0 0 .1em white, 0 0 .2em white;
}
<ul class="aside-icons">
<li><a href="#en" hreflang="en-us" title="English">en</a></li>
<li><a href="#el" hreflang="el" title="Ελληνικά">έλ</a></li>
<li><a href="#tr" hreflang="tr" title="Türkçe">tr</a></li>
<li><a href="#fr" hreflang="fr" title="Français">fr</a></li>
<li><a href="#de" hreflang="de" title="Deutsch">de</a></li>
<li><a href="#es" hreflang="es" title="Español">es</a></li>
<li><a href="#ru" hreflang="ru" title="Русская">ru</a></li>
</ul>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment