login
administrateur
login
Le 3 juin 2013 à 22 h 19 min   
Utilisation des propriétés ‘Filter’ et ‘Opacity’

Un petit bout de code ne vaut-il pas mieux qu’une grande explication

 

#container {
	width: 620px;
	margin: 0 auto 15px auto;
	display: block;
	border-radius: 5px;
	padding: 6px 6px 5px 6px;
	border: solid 1px #ddd;
	border-bottom: 	solid 1px #ccc;
	background-image: url(../images/a_pied-sketch.png);
	background-repeat: no-repeat;
	background-position: 6px 6px;
	-webkit-transition: -webkit-box-shadow 0.9s ease-in;
	-moz-transition: box-shadow 0.9s ease-in;
	-o-transition: box-shadow 0.9s ease-in;
	transition: box-shadow 0.9s ease-in;
}

#container:hover {
	-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
	-webkit-transition: -webkit-box-shadow 0.9s ease-in-out;
    -moz-transition: box-shadow 0.9s ease-in-out;
    -o-transition: box-shadow 0.9s ease-in-out;
    transition: box-shadow 0.9s ease-in-out; 
}

#images {
	width: 620px;
	background-color: transparent;
}

#images a img {
    opacity: 0;
    border: none;
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity = 0);
    -webkit-transition: opacity 0.9s ease-in-out;
    -moz-transition: opacity 0.9s ease-in-out;
    -o-transition: opacity 0.9s ease-in-out;
    transition: opacity 0.9s ease-in-out;
 
}
 
#images a:hover img, #images a:focus img {
    opacity: 0.9;
    -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity = 90);
}
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