[Snippet] Bordures multiples en CSS3
Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂
Vous avez peut-être déjà eu besoin de faire plusieurs bordures de couleurs différentes sur un seul bloc. Avec CSS3, c’est désormais jouable !
La technique la plus connue en CSS2, malgré sa limite à deux bordures, était :
.monbloc {
border: 2px solid blue;
outline: 2px solid red;
}Heureusement, CSS3, avec son box-shadow, apporte une solution toute simple pour augmenter le nombre de bordures : Appliquer des ombres multiples, avec une diffusion de 0px et une épaisseur choisie.
.monbloc {
-webkit-box-shadow: 0 0 0 2px red,0 0 0 4px blue,0 0 0 6px green;
-moz-box-shadow: 0 0 0 2px red,0 0 0 4px blue,0 0 0 6px green;
box-shadow: 0 0 0 2px red,0 0 0 4px blue,0 0 0 6px green;
}La taille de chaque ombre est égale à celle de la bordure voulue, plus celle de l’ombre précédente.
Attention, deux inconvénients à cette technique :
- elle n’est compatible qu’à partir d’IE9 (Donc à destination de 70% du public, selon CAN I USE)
- Les ombres ne sont pas gérées dans le box-sizing de l’élément
Vous connaissez une meilleure technique (sans image?)
Hello,
Je ne connais pas de meilleure technique pour le moment. C’est même celle que j’ai utilisé pour un client il y a peu de temps (j’avais uniquement le droit de toucher à la CSS, pas d’image, pas de html en plus).
Autrement il y a également l’utilisation des pseudo-éléments :before et :after qui pourrait permettre de créer une double ou triple bordure en CSS2 (pas encore testé mais je l’imagine bien)
Bonne continuation 😉
Avec du before/after, on doit pouvoir monter à 6 bordures avec la technique conventionnelle, mais ça me semblait un peu trop lourd pour du design :’)
Ah ah 😀
Ouais, m’enfin c’est pas parce qu’on peut faire qu’il faut le faire 🙂 Mais oui effectivement on peut en faire pas mal comme ça.
Il est rare d’avoir un design avec une triple bordure, mais j’aime bien l’astuce sur le principe. Sur le même principe il est possible de faire un design avec un certain type de bordure pour les nouveaux navigateurs et un autre type pour les navigateurs plus anciens. C’est rare que ça arrive, mais c’est envisageable.
Bonjour,
La commande est très intéressante et très fonctionnelle. Dommage qu’elle ne soit pas compatible avec tous les navigateurs ou les versions précédentes comme pour IE.
amicalement
@Tony : ce n’est pas si rare. Twitter le fait, Google le fait, et je le fais personnellement dans tous mes projets. Le design dégradé ne nuit en rien à la qualité du site.
@lionel : il n’y a rien de dommage, les vieux navigateurs sont vieux, ils on du mal à s’entendre avec la jeune technologie mais on peut faire au mieux pour qu’ils s’adaptent et ne soient pas complètement perdus. Pour cela il existe d’autres techniques plus ancestrales 🙂