Coins arrondis et boites à ombre portée
CSS3 disposera de propriétés pour faire des bords ronds, des
bords consistant d'images et de boites avec des ombres, mais avec
un peu de travail, vous pouvez en simuler quelques uns avec CSS2 —
sans tableaux ni code supplémentaire.
Cett page est inspirée de celle créée par
Arve Bersvendsen. Il dispose de beaucoup d'autres démonstrations
CSS intéressantes.
Bien sur, les bords arrondis et les ombres seront simplifiées
avec CSS3. Par exemple, pour donner à un paragraphe un encadré
rouge épais avec des coins arrondis, vous n'auriez besoin que de
deux lignes de CSS3, semblables à cela :
P { border: solid thick red;
border-radius: 1em }
Et pour ajouter une ombre portée floue un demi-cadratin en
dessous et à droite du paragraphe, une seule ligne suffirait :
P { box-shadow: black 0.5em 0.5em 0.3em }
(Vous pouvez essayer ici si cela
fonctionne déjà.) Mais si vous en avez besoin immédiatement et que
vous ne vous formalisez pas d'un peu de complexité et manque de
flexibilité, vous pouvez utiliser la technique ci-dessous. Dans
tous les cas, elle constitue un bon test pour les navigateurs ayant
quelques défauts ...
Cinq images sur un élément
L'astuce consiste en l'utilisation de contenu généré (':before'
et ':after') afin d'ajouter quatre images supplémentaires à un
élément. Le pseudo-élément ':before' peut avoir une image
d'arrière-plan et d'avant-plan, ainsi que le pseudo-élément
':after', et l'élément en lui-même peut avoir un arrière-plan, ce
qui fait un total de cinq images.
Nous créons cinq images PNG que nous plaçons aux quatre coins
contre le bord droit de l'élément. Voici les images :
- coin supérieur gauche :
- partie supérieure et coin supérieur droit :
- partie du milieu et bord de droite :
- coin inférieur gauche :
- bord inférieur et coin inférieur droit :
Et voici les règles CSS pour les positionner :
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote:before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote:after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Puisque notre image de fond fait 620 px de large, nous ne
pouvons avoir de boites plus larges que 620 px sans avoir d'espaces
vides. Pour ceci, la propriété 'max-width' existe. La propriété
'display: block' est nécessaire pour s'assurer que le contenu
généré créera ses propres boites au dessus et en dessous du contenu
principal, plutôt que de les insérer à la première et dernière
ligne. 'Line-height: 0' s'assure qu'il ne reste pas d'espace pour
les jambages inférieurs et supérieurs au dessus et au dessous des
images dans la propriété 'content'.
Le résultat
Et voici le rendu :
Voyez-vous une boite vert pâle aux coins arrondis et une ombre
portée contre un fond blanc ? Si non, votre navigateur ne gère
pas correctement le contenu généré (ou bien pas du tout).
Le code HTML ne contient rien de plus que l'essentiel :
<blockquote>
<p>Voyez-vous une boite vert pâle aux coins
arrondis et une ombre portée contre un fond blanc ?
Si non, votre navigateur ne gère pas correctement
le contenu généré (ou bien pas du tout).
</blockquote>
Et si vous voulez tester si votre navigateur sait faire ceci
selon CSS3, vous pouvez essayer ici.
