Image avec ombre portée en CSS
janvier 21, 2007
Petit tutorial qui vous montre comment créer une ombre portée sur une image grâce aux CSS.
Le principe
La technique est de mettre votre image qui est dans le code html (ex: <img src=”votre_images.jpg” alt=”" /> ) dans un <div> auquel vous appliquerez l’ombre portée à l’aide de la propriété CSS “image-background”. Petite démonstration.
Première étape
Pour l’instant notre code ressemble à cela:
<img src="images/rose.jpg" alt="Rose" />
Ce code affiche uniquement l’image “rose.jpg” sans aucune ombre, nous allons donc la créer.
Deuxième étape
- Notre image est un carré de 104×104px, faire alors une sélection de 114×114px que vous remplirez de blanc (par exemple).
- Ensuite appliquer une ombre portée à votre carré (Réglages de l’ombre: Opacité:30%, Distance:0px, Taille:6px).
- Rogner et aplatissez le tout puis exporter avec le fond correspondant à votre page.
Maintenant il ne nous reste plus qu’à mettre notre ombre derrière notre image avec un tout petit peu de code.
Dernière étape
<!-- Le code Html -->
<div class="img-ombre">
<img src="images/rose.jpg" alt="Rose" />
</div>
<!-- Le code CSS -->
.img-ombre {
background: url(images/ombre_back.gif) no-repeat;
width:128px;
height:128px;
}
.img-ombre img {
padding:11px 0 0 11px;
}
Et voilà! Vous savez comment ajouter une ombre portée à une image grâce aux CSS. N’hésitez pas à laisser vos commentaires.
Bhen
Bonjour et félicitation pour ton site.
Je m’intérroge sur l’utilité de ce tutorial. Pourquoi faire ce travail en deux étapes ? Si on appliquait directement l’ombre portée sur un second calque photoshop, nous aurions le même résultat (ou alors quelque chose m’échappe).
Octave Z
Salut Bhen! En effet on aurait pu appliquer un second calque mais alors on perd l’intérêt de la feuille de style qui permet de séparer le design du contenu. Si tu désactives la feuille de style ou en mets une autre ton ombre sera toujours présente, ce qui est contraignant car tu ne peux plus rien changer.
Bhen
ok !
je l’avais pas vu sous cet angle.
JP
Bonjour,
Juste un mot rapide (je suis trop à la bourre sur tous mes dossiers pour développer !!!) : il est plus sémantique de donner la “class” directement à la photo, ce qui enlève le besoin de la “div” qui la contient, comme par exemple :
Tout cela est possible car on peut donner un “background”, une “border”, un “padding”, et des tas d’autres styles à une balise “img” en css.
A méditer…
Bonne continuation, et encore toutes mes excuses pour ce passage “en coup de vent”.
JP
Zut, mon exemple a zappé : j’ai fait ça comme un bourrin.
En bref, il faut rajouter class=”ombre” dans la balise img du html et définir la class img.ombre dans le css.
Raphael
Tres bien fait! Je vais utiliser ce technique pour mon page d’internet. (Excusex mon mal francais)
Martial
Bravo pour le site. Il est sobre, agréable et bien mis en page.
Concernant ce tutoriel, je rejoins JP. Si le but de css est de séparer contenu et mise en forme, il ne s’agit pas de tomber dans des travers comme une surabondance de balises “div”. Il vaut mieux appliquer la class directement à la balise “img”.
Cela dit, l’effet est très joli. Et je salue ton intérêt à partager tes connaissances.
clb56
Il n’y a aucune logique à utiliser une balise div comme conteneur de l’image la balise img est de niveau inline donc soit on la place dans une balise p qui sert justement à séquencer le niveau inline du flux du document html, soit on place img dans un span si on ne souhaite pas de séquençage de ce flux.
L’erreur, mineure certes, provient de ce que vous appréhendez div seulement sous l’angle balise block neutre. Il est plus judicieux et plus riche de considérer div comme la balise permettant un séquençage du flux de niveau block (et non inline).
Dit autrement div est avant tout un conteneur block de balises elles mêmes de type block. Ce qui ne correspond pas au code html que vous présentez.