Trucs et Astuces CSS
Chapitre 5 : Manipulations d’images
Retour Accueil CSS
44 Bas relief ou paraglyphe
Termes CSS clés employés : background-position, transform:translate()
Compatibilité navigateurs : IE10+, Firefox16+ et Opera12.5+.
Chrome et Safari avec préfixe.
Problématique
Créer un effet de bas relief à partir d’une image en pur CSS. Ce type d’image, nommé paraglyphe, était un grand classique de la photographie argentique noir et blanc obtenu en superposant tout en les décalant légèrement deux images sur pellicule : un positif et un négatif.
Résolution théorique
Pour reproduire cet effet, il nous faut deux images en tons de gris, un positif et un négatif. A noter que pour que l’effet soit intéressant l’image doit représenter quelque chose doté de contours nets et francs. Les deux images seront superposées et légèrement décalées.
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.
<DIV class="conteneur">
<DIV></DIV>
<DIV></DIV>
</DIV>
Remarquez que les éléments DIV sont vides, mais qu’il serait possible d’y placer un contenu quelconque
(dans le second de préférence pour qu’il soit au-dessus).
Le code CSS commence par définir l’élément conteneur, ici de largeur double à celle de l’image :
les deux DIV enfants se trouveront donc théoriquement côte à côte.
DIV.conteneur {
width:400px;
margin:50px auto 10px;
}
Vous spécifiez ensuite les caractéristiques du premier élément DIV. Il contient l’image positive
en arrière-plan, avec une opacité fixée à 1.
DIV.conteneur DIV {
background-image:url("nainBW.jpg");
width:200px;
height:200px;
display:block;
float:left;
opacity:1;
}
Puis vous définissez les caractéristiques du second élément DIV. Son image de fond est l’image négative,
décalée de 3 pixels vers le haut et vers la droite, avec une opacité fixée à 0.5. Après quoi l’élément
est déplacé de 200 pixels vers la gauche pour recouvrir le premier élément.
DIV DIV:nth-child(2) {
background-image:url("nainBWneg.jpg");
background-position: 3px, -3px;
opacity:.5;
transform:translateX( -200px);
}
Vous voyez ici les deux éléments DIV juxtaposés avant superposition (et donc les images originelles en
positif et en négatif), puis le résultat après superposition. Surprenant, non ?
Le point un peu ennuyeux dans cette démonstration est la nécessité d’employer deux images en noir et
blanc, dont une inversée, ce qui impose de recourir à un logiciel de dessin. Il serait bien plus
agréable de pouvoir obtenir automatiquement cet effet à partir d’une unique image, éventuellement en
couleur.
Tel est le but des filtres CC3, mais ceux-ci sont malheureusement très peu standardisés pour le moment
et seuls Chrome et Safari les reconnaissent, à l’aide du préfixe -webkit-. Voici ce à quoi pourrait
ressembler le code CSS pour obtenir cet effet avec Chrome ou Safari :
DIV.conteneur {
width:400px;
margin:50px auto 10px;
}
DIV.conteneur DIV {
background-image:url("image.jpg");
-webkit-filter : grayscale(100%) ; /* passage en tons de gris */
width:200px;
height:200px;
display:block;
float:left;
opacity:1;
}
DIV DIV:nth-child(2) {
-webkit-filter: grayscale(100%) invert(100%); /* négatif et tons de gris */
background-position: 3px, -3px;
-webkit-transform:translateX( -200px);
opacity:.5;}
Remarquez que tout nouveau filtre annule le précédent : il faut donc ajouter l’inversion au passage en tons de gris.
Image normale
Tons de gris
Négatif
Négatif + gris
Paraglyphe
Retour Accueil CSS
|
|
|---|