CSS3 : border-image

Bonjour,

je me pose 2 questions sur cette propriété :

1/ Pouvons-nous l'appliquer juste à un coté (comme border: "border-left", "border-bottom-right-radius"...). Je ne le vois pas dans les spécifications du W3C.

2/ Si la réponse est non, j'ai du mal à cerner son intérêt. La bordure est sur les 4 côtés ; en mettant un background-image, nous obtenons le même résultat ! L'avantage est-il juste de pouvoir combiner le background-image avec le border-image ?

Merci pour vos réponses

a écrit :
Pouvons-nous l'appliquer juste à un coté (comme border: "border-left", "border-bottom-right-radius"...). Je ne le vois pas dans les spécifications du W3C.

Je ne sais pas si tu totalement compris comment marche le border-image, en fait on part d'une image qui va contenir nos 4 cotés et nos coins, qu'on va utiliser en général en l'étirant, on ne définit par une image par coté.
J'aime bien ce site qui permet de jouer avec plusieurs images pour voir un peu comment ça fonctionne.
Je pense que si tu ne veux pas d'image du coté gauche par exemple, il te suffit de laisser des pixel transparents du coté gauche non (après possible que je me trompe il faudrait que je fasse un test) ?

L'intérêt ? Purement esthétique, si tu prends ce site tu notera les petits points tout discret autour des images grâce au border image
Modifié par InpIxelItrust (20 Aug 2010 - 15:14)

Merci pour ta réponse et les liens !!

Je comprend le principe mais l'image que tu mets en étant étirée, va perdre beaucoup en qualité non ?

Yeah it works, je viens de faire le test :



le css (codé à l'arrache on se moque pas):

div{
margin-bottom: 20px;
}
#border-px{
width:300px;
border-width:10px 10px 10px 10px;
-webkit-border-image: url(border.png) 10 10 10 10 repeat;
}

#border-px2{
width:300px;
border-width:10px 10px 10px 10px;
-webkit-border-image: url(border2.png) 10 10 10 10 repeat;
}

Pour ce qui est de l'étirement de l'image tout depend si tu utilise la méthode stretch", "repeat" ou "round". Stretch va étirer le milieu de ton image, repeat va comme le nom l'indique répéter ton morceau du milieu, quant à round, euh j'avoue je vois pas la différence avec repeat visuellement parlant.
Le but est donc de créer une image "simple" qui puisse se répéter ou s'étirer. Perso je pense qu'on peut aussi l'utiliser comme "ombre" par exemple si on veut une ombre portée un peu spéciale réalisée avec photoshop qu'on n'arrive pas à refaire en css3. Après on peut imaginer une bordure de pokemons qui dansent dans un gif animé en mode repeat hein, ou pleins de petites fleurs de toutes les couleurs, mais esthétiquement parlant... bref

Le mieux c'est de tester et jouer un peu avec ^^


Edit : tiens je viens de voir qu'il n'y a pas encore d'article sur alsacreations traitant du sujet, ou alors je ne sais plus chercher :o
Modifié par InpIxelItrust (20 Aug 2010 - 15:41)

Merci beaucoup pour tes réponses !

Je vais de ce pas tester aussi !

Bonsoir !

Petite correction des explications données par InpIxelItrust : l'image qui sert de bordure ne doit pas forcément les contenir toutes ; tu peux très bien ne vouloir appliquer ton image que sur un côté de ton élément. Petit exemple :

h1{
 border-bottom: solid 10px #000;
 border-image: url(border.png) 0 0 100% 0 repeat;
}

Ici, l'image border.png est répétée sur toute la longueur de l'élément h1.

Bonsoir,

la_luciole a écrit :
1/ Pouvons-nous l'appliquer juste à un coté (comme border: "border-left", "border-bottom-right-radius"...). Je ne le vois pas dans les spécifications du W3C.

Oui. Trois options à ma connaissance:
- en utilisant la propriété border-image-width (par exemple: border-image-width: 20px 0; pour des bordures en haut et en bas);
- en utilisant le bon vieux border-width;
- en utilisant une image avec des parties vides...

La dernière est un bidouillage pas terrible. La première est une solution intéressante, mais pas implémentée dans les versions actuelles de Firefox et Safari d'après un premier test rapide. Reste donc la deuxième solution, sans doute la plus simple d'utilisation si tu n'as pas besoin d'avoir une bordure de style différent (une bordure classique) sur les côtés où tu n'utilises pas la bordure en image.

la_luciole a écrit :
2/ Si la réponse est non, j'ai du mal à cerner son intérêt. La bordure est sur les 4 côtés ; en mettant un background-image, nous obtenons le même résultat !

OK, je crois que t'as pas compris l'intérêt du truc. Le but est d'utiliser pour les bordures des motifs qui peuvent être répétés (ou éventuellement étirés), et s'adapter ainsi à des blocs de largeurs variable.

Je te renvoie à la dernière version de la spec:
http://www.w3.org/TR/css3-background/#border-images
Et à la documentation pour l'implémentation actuelle dans Firefox (il y a un message d'avertissement qui dit que la spec a évolué de manière significative par rapport à cette implémentation):
https://developer.mozilla.org/en/css/-moz-border-image

Merci !