[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 commentaires Ajoutez les votres

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.