Chapitre 5
Manipulation d'images
Retour Accueil CSS
43 Image réfléchie.
Termes CSS clés employés : transform:translate(), transform:rotate(), transform :scale(), border-radius, linear-gradient.
Compatibilité navigateurs : IE10+, Firefox16+, Opera12.5+. Chrome et Safari avec le préfixe -webkit-.
Problématique
Créer une image réfléchie en pur CSS.
Résolution théorique
La méthode la plus évidente consiste à doubler l’élément et à appliquer au double une rotation de 180° sur l’axe de réflexion, en laissant voir l’image par transparence.
Résolution pratique
Le code HTML est notre très classique élément DIV conteneur, qui va renfermer deux éléments DIV individuels, dans laquelle l’image va être mise en image de fond. Le deuxième élément contient un élément SPAN qui sera employé pour créer un dégradé progressif.
<DIV class="conteneur">
<DIV></DIV>
<DIV><SPAN></SPAN></DIV>
</DIV>
Le code CSS définit le DIV conteneur, puis les caractéristiques communes aux deux DIV enfants :
DIV.conteneur {
width:1000px;
margin:50px auto 10px;
padding-top:100px;
}
DIV .conteneur DIV {
border-radius:10px;
background-color:black;
background-image:src("cour.jpg");
padding:10px;
height:250px;
display:block;
float:left;
}
Réflexion : les deux images brutes
Après quoi on applique la rotation au deuxième enfant DIV :
DIV .conteneur DIV:nth-child(2) {transform:rotateX(180deg);}
Réflexion : inversion de l'image inférieure
Enfin, on définit les caractéristiques de l’élément SPAN : un gradient linéaire partant à 90%, avec une couleur RGBA réglée de noir à blanc pur à partir de 70% de la hauteur, avec une opacité allant de 0,3 à 1 (le bas sera donc uniformément blanc).
DIV SPAN{
position: absolute;
width: inherit;
height: inherit;
background: linear-gradient(rgba(255,255,255, 1), rgba(255,255,255,1) 30%, rgba(0,0,0,.3));
}
Réflexion : application du gradiant linéaire et résultat final.
Retour Accueil CSS
|
|
|---|