login
administrateur
login
Le 23 mai 2013 à 21 h 21 min   
Effet de plis sur image
flecheSi vous survolez cette image, vous verrez apparaître un effet de plis sur l’image en haut à gauche. Je vais vous expliquer comment arriver à ce résultat.

Si vous le souhaitez, le fichier zipper contenant l’intégralité de ce code est disponible en bas de page

Tout d’abord le code html à insérer entre les balises <body> et </body>

Code HTML
<div class="bloc-tuto-boite"><a class="bloc-tuto tuto-pli" href="" title="">
<img src="images/icone.png" alt="" height="182" width="182"></a>
</div>
Code CSS
.bloc-tuto-boite{
	width:182px;
	height:182px;
	padding:2px;
	position:relative;
	z-index:20;
	background-color: transparent;
	background-image: url(../images/fond.jpg);
	background-repeat: no-repeat;
}

.bloc-tuto-boite .bloc-tuto{
	display:block;
	width:182px;
	height:182px;
	position:relative;
	z-index:30
}

.tuto-pli{
	position:relative;
	z-index:38
}

a.tuto-pli:hover{
	text-decoration:none
}

.tuto-pli:before,.tuto-pli:after{
	content:' ';
	position:absolute;
	left:0;
	right:0;
	top:0;bottom:0
}

.tuto-pli:before{
	z-index:39;
	-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3);
	-khtml-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3);
	-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3);
	-o-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.3);
	-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out
	
}

.tuto-pli:hover:before{
	-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6);
	-khtml-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6);
	-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6);
	-o-box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 50px rgba(200,200,200,.6);
}

.tuto-pli:hover:after{
	z-index:40;
	background-color: transparent;
	background-image: url(../images/pli.png);
	background-repeat: no-repeat;
}
visuel

Aucun commentaire »

  1. No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Vous devez vous connecter pour publier un commentaire.

Propulsé par WordPress   |   Personnalisé par Webinnov
Haut de page