login
administrateur
login
Le 1 juin 2013 à 14 h 43 min   
Survoler à l’aide de votre souris pour voir le résultat   –   Code HTML…

 

 
<div class="rotate">
  <div><img src="images/logo_248-64.png"
  width="248" height="64" alt="logo" /></div>
 

Code CSS…

 

/* Effet sur Logo par Webinnov */
		
/* Rotate & Scale */

.rotate {
	float: left;
	width:250px;
	background-color:#FFF;
	border: 1px solid #333;
	margin-right: auto;
	margin-left: 15px;
	margin-top: 10px;
	padding: 2px;
	border-radius: 10px;
	-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
	-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	-moz-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);

}

.rotate:hover {

	-webkit--box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	-moz-box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	box-shadow:0 10px 10px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.20) inset;
	-webkit-transform : scale(1.1) rotate(-3deg);
	-moz-transform : scale(1.1) rotate(-3deg);
	-ms-transform: scale(1.1) rotate(-3deg);
	-o-transform : scale(1.1) rotate(-3deg);
	transform : scale(1.1) rotate(-3deg);
	-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
	cursor:url(https://blog.webinnov.fr/news/2013-05-31/rotate_inv/images/loupe.png), auto;
}
David LAURENT

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