 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Des ombres portées en CSS |
| |
| "Comment puis-je créer une ombre à droite et en dessous de mes images en utilisant uniquement CSS ?"
(24/03/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
L'utilisation d'ombres portées est une technique de plus en
plus courante dans le design Web, car elles permettent de relever
une page qui autrement semblerait peut-être trop plate. Problème
: la plupart du temps, ces ombres portées utilisent des images
découpées et groupées dans un tableau, ce qui sémantiquement
est loin d'être excellent, et peut rendre la mise à jour du
site plus ardue.
Il est
possible de recréer cet effet via CSS, en utilisant un minimum
d'images. En effet, les implémentations actuelles de CSS ne
permettent pas de créer le dégradé nécessaire à l'ombre voulue,
aussi faut-il faire appel à une petite image pour remplir cette
tâche.
La technique que nous présentons ici utilise donc une image
transparente (donc GIF ou PNG), qui est appliquée, grâce à CSS,
tout du long des bordures inférieures et droites de tout élément
marqué de la classe ombre. Les bordures étant néanmoins "intérieures"
à l'image, il nous faut imbriquer tout d'abord l'élément ciblé
dans une première balise DIV, qui créera l'espace nécessaire
à la visualisation de l'ombre.
<div class="ombre">
<div class="boite">
<img src="img/laMer2.jpg" width="150"
height="150" />
</div>
</div>
<div class="ombre">
<div class="boite boiteTxt">
<p>Avec du texte dedans</p>
<div>
</div>
<style>
.ombre {
float:left;
clear:left;
background: url(img/ombre.png) no-repeat bottom
right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.boite {
background: lightblue;
position:relative;
bottom:6px;
right: 6px;
}
.boiteTxt {
padding:4px;
}
</style> |
|
|
|
|
|
|
