Forme arrondi au passage de la souris
Code HTML MODIFIER/ juste avant ceci </b:template-skin>
======Recatangle/ Ovale ==========
.post-body img {
box-shadow: 0px 0px 12px #000; /* Ombre */
border-radius: 50%; /* Bordure arrondie */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Suppr. l'ombre (valeur 0) */
border-radius: 0; /* Sppr. l'arrondi de la bordure (valeur 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
===== Image rectangle / forme Style de noyau =======
.post-body img {
background:#5e6de4; /* Couleur d'arrière-plan autour de l'image */
padding:3px; /* Espace entre la bordure et l'image */
-moz-transition: tous les 1;
-webkit-transition: tous les 1;
-o-transition: tous les 1;
}
.post-body img:hover {
box-shadow: 0px 0px 12px #000; /* Ombre */
border-radius: 0% 50%; /* Bordure arrondie */
-moz-transition: tous les 1;
-webkit-transition: tous les 1;
-o-transition: tous les 1;
cursor:pointer;
}
====== Style de noyau a rectangle == ====
.post-body img {
background:#FFF; /* Couleur d'arrière-plan autour de l'image * /
padding:15px; /* L'espace entre la bordure et l'image */
border-radius: 50% 0; /* Bordure arrondie */
box-shadow: 0px 0px 15px #000; /* Ombre */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Suppr. l'arrondi de la bordure (valeur 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
============== Cylindre ==================
.post-body img {
border-radius: 45% / 20%; /* Bordure arrondie */
box-shadow: 0px 0px 12px #000; /* Ombre */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
======== Ovale/ rectangle =============
.post-body img {
box-shadow: 0px 0px 12px #000; /* Ombre */
border-radius: 50%; /* Bordure arrondie */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Suppr. l'ombre (valeur 0) */
border-radius: 0; /* Suppr. l'arrondi de la bordure (valeur 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
=====NOTE========
Les effets s'applique sur les images de vos articles.
POur faire d'autres formes ''element'' amusez vous ici
Aucun commentaire:
Publier un commentaire