La propriété border-image en CSS3
Par Estelle Weyl
Bien que ce ne soit pas vraiment une nouveauté pour les navigateurs, la propriété border-image est désormais disponible dans la spécification CSS3. border-image (littéralement : image de contour, NdT) offre une méthode pour ajouter des contours décoratifs à n’importe quel élément. Avec les propriétés de border-image, vous pouvez créer des contours décoratifs pour des éléments qui vont bien au-delà des simples coins arrondis, avec des images très légères ou même avec des dégradés.
La propriété border-image vous permet de prendre une petite image, de la découper virtuellement en neuf tronçons, et de disposer ou d’étirer les morceaux de votre petite image au sein d’un autre élément beaucoup plus grand.
Vous pouvez prendre une image et l’étirer sur toute la largeur d’un bouton ou d’une page entière.
Nous avons utilisé l’image de gauche comme image de contour (border-image) à appliquer à la div de droite : il s’agit d’en maintenir les coins, tout en étirant le centre de notre image de contour pour recouvrir l’ensemble de la div de droite.
Dans ce second exemple, au lieu d’étirer le milieu de l’image de contour, nous l’avons répété. On pourra déformer légèrement l’image si nécessaire afin de s’assurer qu’elle ne soit pas abîmée dans les navigateurs qui l’afficheront. Pour s’assurer que l’image ne soit pas « cassée », sa largeur doit être un multiple de la largeur de celle de la petite tranche découpée dans l’image de départ. Nous avons donc répété le haut, le bas et les côtés tout en maintenant les coins à l’identique, créant ainsi un effet de timbre.
Voyons maintenant comment prendre une image de fond (background image) puis la découper virtuellement, et ensuite effectuer soit une répétition, soit un étirement afin de recouvrir les contours et le fond de notre élément.
La propriété border-image est un raccourci qui permet de déclarer :
- border-image-source :
- border-image-slice :
- border-image-width :
- border-image-outset :
- border-image-repeat :
La syntaxe pour ce raccourci doit être :
border-image: <source>
<slice {1,4}> / <width {1,4}> <outset> <repeat{1,2}>;Pour l’instant, les navigateurs Opera, Firefox, Chrome et Safari supportent tous la propriété raccourcie border-image mais ne supportent aucune des propriétés individuelles qui constituent ce raccourci. Par conséquent, même si nous allons traiter des différentes propriétés qui définissent les images de contour, il vous faudra toujours utiliser le raccourci et non pas le détail expliqué ci-dessous.
border-image-source :
La source de l’image de contour est constituée de l’URL, du dégradé ou des données URI de l’image que vous souhaitez employer comme image de contour. Dans les exemples précédents, et même si la propriété détaillée n’est PAS supportée en elle-même, c’est comme si nous avions utilisé :
.boiteEnDegrade {
border-image-source: url(degrade.png);
}
.timbre {
border-image-source: url(timbre.gif);
}Vous pouviez déjà utiliser des dégradés, des images codées en base64, des gifs, des jpegs, des pngs et même des images SVG comme images de fond : de la même façon, vous pouvez maintenant inclure tous ces types d’images comme images de contour.
border-image-slice :
La propriété border-image-slice définit jusqu’à quatre longueurs permettant d’indiquer la distance à partir de chaque coin de l’image, afin de couper ou trancher notre image de contour.
Les valeurs de la propriété border-image-slice correspondent à des décalages vers l’intérieur à partir des bords de l’image (respectivement les bords haut, droit, bas et gauche). Concrètement, avec les quatre traits que l’on définit, le navigateur divise l’image de contour originale en neuf zones : quatre coins, quatre bords et un milieu. Les quatre coins conservent leur taille initiale. Les cinq autres valeurs peuvent être étirées ou répétées, ou bien un mélange des deux (effet d’arrondi), en fonction des valeurs des autres propriétés border-image.
Les traits noirs sur les images ci-dessus indiquent comment les quatre traits que nous avons définis découpent notre image de contour.
Dans nos exemples, nous avons tranché l’image à 30px à l’intérieur de chaque côté de l’image en dégradé, et à 8 pixels de chaque côté de l’image en timbre.
Dans les exemples ci-dessus, bien que l’écriture détaillée ne soit PAS supportée, c’est comme si nous avions utilisé :
.boiteEnDegrade {
border-image-slice: 30 30 30 30;
}
.timbre {
border-image-slice: 8 8 8 8;
}ou encore, dans la mesure où les valeurs sont répétées (à l’instar du haut-droite-bas-gauche pour les propriétés border ou padding), nous pouvons utiliser une valeur unique pour les quatre côtés :
.boiteEnDegrade {
border-image-slice: 30;
}
.timbre {
border-image-slice: 8;
}Vous remarquez que nous n’avons précisé aucune unité de longueur. Si vous indiquez des longueurs pour les tranches de l’image, et que ces valeurs sont à interpréter en pixels, ne précisez pas l’unité employée. Mais si vous utilisez des valeurs relatives, indiquez le pourcentage. Dans notre exemple, nous aurions pu aussi utiliser ce qui suit :
.boiteEnDegrade {
border-image-slice: 30%;
}
.timbre {
border-image-slice: 26.7%;
}Pour les images bitmap, les valeurs par défaut sont supposées être données en pixels. Pour les images vectorielles (SVG), les valeurs sont des coordonnées. Pour les pourcentages, utilisez le signe « pourcent » (%).
border-image-width
La propriété border-image-width donne la largeur du contour de l’élément. Si la propriété border-image-width est déclarée, elle prend le pas sur border-width dans la mesure où celle-ci est aussi déclarée. Si aucune des deux propriétés n’est déclarée, la valeur sera celle de border-width par défaut (« medium »), soit généralement 3px.
Ce raccourci n’est PAS supporté par Opera (dernière vérification faite sur la version 1024). Par ailleurs, la valeur automatique n’est supportée par aucun navigateur. Par conséquent, il est souvent recommandé d’inclure border-width comme une propriété séparée. En l’incluant dans le raccourci, c’est comme si nous avions déclaré :
.boiteEnDegrade {
border-image-width: 30px 30px 30px 30px;
}
.timbre {
border-image-width: 8px 8px 8px 8px;
}ou encore, dans la mesure où les valeurs sont toutes identiques :
.boiteEnDegrade {
border-image-width: 30px;
}
.timbre {
border-image-width: 8px;
}Nous avons donc jusqu’ici :
.boiteEnDegrade {
border-image: url(degrade.png) 30 / 30px;
}
.timbre {
border-image: url(timbre.gif) 8 / 8px;
}Puisque le simple fait d’intégrer border-image-width dans le raccourci nous bloque pour Opera, il est recommandé de ne pas inclure cette propriété, et d’inclure à la place la valeur border-width de CSS2.
.boiteEnDegrade {
border-width: 30px;
}
.timbre {
border-width: 8px;
}En prenant les mêmes largeurs pour border-image-width et border-image-slice, on obtient les meilleurs résultats d’image de contour, sans déformation. Néanmoins, il n’est pas obligatoire d’avoir des valeurs identiques. La tranche d’image sera étirée (ou contractée) à la largeur indiquée par border-image-width si ces valeurs ne concordent pas.
N’oubliez pas le box model ! Plus vous augmentez la valeur de border-image-width, plus votre élément va grandir.
border-image-outset
La propriété border-image-outset indique de combien la zone de l’image de contour peut s’étendre au-delà de l’espace de contour sur les quatre côtés. C’est une propriété qui n’est reconnue par aucun navigateur, et qui annulera même l’intégralité de la déclaration, donc à ne pas inclure pour le moment. La valeur par défaut est de zéro.
border-image-repeat
La propriété border-image-repeat vous permet de préciser de quelle façon les parties de l’image hors coins (c’est-à-dire les côtés et le milieu) sont répétées ou mises à l’échelle. La première valeur concerne le haut et le bas, la seconde les côtés droit et gauche. Si la seconde valeur est omise, les quatre côtés auront la même valeur.
Les spécifications définissent actuellement quatre valeurs possibles, mais seules trois sont bien interprétées. Stretch signifie que l’image ne doit pas être répétée en mosaïque, mais étirée afin de remplir la zone. Repeat signifie que l’image est répétée en mosaïque jusqu’à remplir la zone. Si la zone allouée pour la répétition de l’image n’est pas exactement divisible par la largeur de l’image, la dernière occurrence de l’image risque d’être coupée. Avec round, l’image est répétée en mosaïque pour remplir la zone, tout en mettant sa taille d’origine à l’échelle adaptée : elle risque de ne pas conserver son rapport largeur-hauteur, mais on est certain qu’elle ne sera pas coupée. Remarquez au passage que Webkit ne comprend pas la valeur round, et la remplace par repeat (ce qui vaut mieux, après tout, que de ne rien comprendre du tout...).
La valeur space n’est pas supportée actuellement, mais si c’était le cas, l’image de contour serait répétée autant de fois que nécessaire pour remplir l’espace offert avec chaque occurrence régulièrement espacée par du blanc, dans la mesure où la largeur n’est pas un multiple exact de celle de l’image de départ.
Dans nos exemples ci-dessus, nous avons utilisé stretch pour le dégradé et round pour le timbre. Il faut toujours étirer les dégradés avec stretch, car si vous les répétez avec repeat, cela produira des ruptures très visibles entre chaque image. De même, on peut avoir l’impression que repeat serait bien adapté pour le timbre, mais c’est impossible de savoir si l’image est exactement divisible par la largeur de notre design. La valeur round déforme très légèrement l’image, mais c’est mieux que de la voir découpée.
Si nous avions fait l’inverse, l’effet obtenu serait bizarre. Autant le haut et le bas peuvent employer au choix round, repeat ou stretch, autant les côtés droit et gauche ont absolument besoin de la valeur stretch :
L’écriture raccourcie pour border-image
Comme nous l’avons déjà mentionné, aucun navigateur ne supporte les propriétés détaillées définies plus haut, mais Opera, Firefox, Chrome et Safari comprennent la propriété raccourcie border-image préfixée. Maintenant que nous avons compris les composants de la syntaxe raccourcie, il nous reste à tout mettre ensemble.
La syntaxe correcte est :
border-image: <source>
<slice {1,4}> / <width {1,4}> / <outset> <repeat{1,2}>;Mais comme outset n’est pas interprété pour l’instant, nous pouvons ne pas l’intégrer :
border-image: <source>
<slice {1,4}> / <width {1,4}> <repeat{1,2}>;Comme pour toutes les images de contour, nous avons découpé notre image dégradée en neuf tranches définies par la propriété border-image-slice. En général, les tranches ont la même largeur que border-width. Et puisque nous avons un dégradé, il nous faut étirer l’image et non la répéter pour éviter des transitions de couleur indésirables. Donc notre code sera comme ceci :
.boiteEnDegrade {
border-image: url(degrade.png) 34 34 34 34 / 34px 34px 34px 34px stretch stretch;
}Ce qu’on peut simplifier pour éviter les répétitions :
.boiteEnDegrade {
border-image: url(degrade.png) 34 / 34px stretch;
}Comme Opera ne comprend pas border-image-width si on l’inclut dans le raccourci, on va l’indiquer séparément, puis on détaillera nos déclarations pour préciser les préfixes propres aux différents navigateurs :
.boiteEnDegrade {
border-width: 34px;
-moz-border-image: url(degrade.png) 34 / 34px stretch;
-webkit-border-image: url(degrade.png) 34 / 34px stretch;
-o-border-image: url(degrade.png) 34 stretch;
border-image: url(degrade.png) 34 / 34px stretch;
}De même, notre effet de timbre est basé sur une image de timbre qu’on indique comme étant la border-image-source ; à l’arrivée nous devrons avoir une bordure de 8px de large, bordure qui devra se répéter mais sans se terminer par un fragment d’image sous peine d’abîmer tout notre design. Reste aussi le problème d’Opera avec border-width, et tous les préfixes propres aux différents navigateurs. Ce qui nous donne le code suivant :
.timbre {
border-width: 8px;
-webkit-border-image: url(timbre.gif) 8 / 8px round;
-moz-border-image: url(timbre.gif) 8 / 8px round;
-o-border-image: url(timbre.gif) 8 round;
border-image: url(timbre.gif) 8 / 8px round;
}Ressources
J’espère que vous avez désormais une meilleure compréhension de la façon de créer une image de contour. Voici quelques outils pour vous aider davantage :
- les spécifications du W3C pour
border-image; - un outil pour créer du code CSS à partir de votre propre image de contour ;
- une grille reprenant les propriétés que supporte ou non chaque navigateur ;
- un outil de visualisation des images de contour.
border-image. Mais pour voir la propriété en action ainsi que le code employé, rendez-vous sur la page de démonstration.
http://www.sitepoint.com/css3-border-image/