Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Coralie Mercier

Feuilles de style pour le Web trucs & astuces en CSS

Voir également l'index de toutes les astuces.

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 :
coin supérieur gauche
partie supérieure et coin supérieur droit :
coin supérieur droit
partie du milieu et bord de droite :
arrière-plan et bord de droite
coin inférieur gauche :
coin inférieur gauche
bord inférieur et coin inférieur droit :
bas 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.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2013 W3C®

Crée le 6 janvier 2004;
Dernière mise à jour jeu. 12 déc. 2013 06:20:47 CET

Langues

À propos des traductions