picture picture
mars 29, 2005 CSS 1 Commentaire

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… » )

One Response to “Générer un ombre de relief sous les photos, sans retouche logicielle”

One Comment

  1. yop dit :

    :)) super astuce je m’en sert tout le temps

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: