Générer un ombre de relief sous les photos, sans retouche logicielle
Pratique aussi en PHP pour les images générées dynamiquement …
Finies les retouche Gimp ou PhotoShop ! CSS fait cela très bien…
Voir un exemple
Internet explorer interprétant légèrement différemment les marges, il faut tricher un peu… mais c’est très simple.
Code commenté du style :
<style type="text/css"> /* boite pour l'ombre de fond : aligne l'image intérieure à sa droite; ombre (ombre.png) positionnée en bas à droite de la boite; pas de marge intérieure */ .ombre { float:left; background: url(ombre.png) no-repeat bottom right; padding: 0px; } /* boite pour la photo : relative à celle de l'ombre, décalée en haut à gauche, le décalage étant moins important pour IE (= "!important") que pour les navigateurs interprétant normalement ... */ .photo { position:relative; bottom:5px !important; bottom:2px; right: 5px; } </style>
Il n’y a plus qu’à imbriquer l’image ou la photo dans sa boite avec une bordure ombrée :
<div class="ombre"> <div class="photo"> <img src="photo.png" /> </div> </div>
Télécharger « ombre.png » (clic droit > « enregistrer la cible du lien sous… » )
:)) super astuce je m’en sert tout le temps