[WEBDESIGN] Une bien jolie barre latérale en pure CSS !
Je me suis amusé à me bricoler une petite barre latérale pour mettre les liens vers mes profils sociaux. Cette barre sera inclus dans une prochaine version du thème WordPress actuellement utilisé sur mon blog.
Tout d’abord, voici à quoi cela ressemble :
Ensuite voici la recette pour que vous puissiez le refaire chez vous !
Tout d’abord le code HTML :
<div id="profiles"> <div class="facebook"><a href="#">F</a></div> <div class="twitter"><a href="#">T</a></div> <div class="delicious"><a href="#">D</a></div> <div class="flickr"><a href="#">F</a></div> </div>
Ensuite un peu de CSS
#profiles {position:fixed; top:50%; right:-55px;margin:0;padding:0;z-index:9999;}
#profiles .facebook a {background-color:#3b5999;}
#profiles .twitter a {background-color:#62a4c4;}
#profiles .delicious a {background-color:#3374d0;}
#profiles .flickr a {background-color:#ff0082;}
#profiles:hover {
-moz-transform: translate(-60px,0);
-khtml-transform: translate(-60px,0);
-webkit-transform: translate(-60px,0);
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#profiles a {
font-family:'Lobster',arial,serif;
text-decoration:none;font-weight:bold;font-size:50px;color:#fff;padding:10px 20px;display:block;border:1px solid #000;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 5px rgba(255,255,255,0.5);
-webkit-box-shadow: 0px 0px 5px rgba(255,255,255,0.5);
text-shadow: 0px -1px 3px #333;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#profiles a:hover {
-moz-transform: rotate(-20deg) translate(-10px,0);
-khtml-transform: rotate(-20deg) translate(-10px,0);
-webkit-transform: rotate(-20deg) translate(-10px,0);
}
N’oublier pas d’inclure la typographie Lobster dans votre <head></head> !
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
3 réflexions sur « [WEBDESIGN] Une bien jolie barre latérale en pure CSS ! »
Je viens d’essayer le code, et le rendu est très beau ! 😉
Merci beaucoup !