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.

          Attention : ne fonctionne qu'avec Chrome/Safari

Image normale

Tons de gris

Négatif

Négatif + gris

Paraglyphe


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!