 |
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>
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
