Discussion :

[aRaMinet]

Bonjour à tous,

J'ai un petit soucis que je n'arrive pas à résoudre en appliquant un style de bordure à un bouton.
Voila le CSS appliqué à mon bouton, le but étant d'avoir une bordure dégradé de gauche à droite du bleu vers le rouge :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
background:
	white /*qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 red, stop: 1 blue)*/;
border-radius:
	30px;
border-style:
	solid;
border-width:
	10px;
border-color: 
	qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
	red
	qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
	blue;

Et voila le résultat obtenu, pas très propre comme vous pouvez le remarquer



Quelqu'un aurait-il une solution?

[koala01]

Salut,

En fait, ton principal problème vient du fait que la bordure n'est pas un "tout unique". En gros, une bordure comme celle-ci est composée de quatre (et peut être même de huit) éléments distincts :

• la ligne horizontale du dessus
• la ligne verticale de droite
• la ligne horizontale du bas
• la ligne verticale de gauche

(pas forcément dans cet ordre là, d'ailleurs) et, comme je ne suis pas sur de mon coup, peut être aussi
Si tu observes correctement ton dessin, tu te rendra compte que chacune de ces partie prend... l'intégralité du dégradé que tu essaye de définir.

Pour autant que ce soit possible (cela fait une éternité que je n'ai plus joué avec les CSS), ce que tu devrais faire, c'est donc définir la "portion de dégradé" qui doit être appliquée sur ces quatre partie, de telle manière que la fin de l'une puisse se "raccorder" correctement avec le début de l'autre.

Par exemple, tu commencerais avec la ligne verticale de gauche, de "plein bleu" en bas à une valeur proche de la moitié du dégradé en haut, puis tu contiuerais sur la ligne du haut de cette position dans le dégradé vers le plein rouge (qui atteindrait donc le coin supérieur droit), avant de faire "la moitié" du dégradé du rouge vers le bleu pour la ligne verticale de droite et de terminer avec la dernière moitié du dégradé (celle te ramenant au bleu) pour la ligne horizontale inférieure et ainsi rejoindre la couleur que l'on trouve dans le coin en bas à gauche.

Maintenant, je ne donne aucune garantie quant au fait que ce soit possible, mais, l'un dans l'autre, si tu as des attributs comme border-color, il se peut que tu aies aussi des attributs comme border-left-color, border-right-color, border-top-color et border-bottom-color, qui te permettent de définir à chaque fois "un coté" du bord

[Invité]

Bonsoir,

Maintenant, je ne donne aucune garantie quant au fait que ce soit possible, mais, l'un dans l'autre, si tu as des attributs comme border-color, il se peut que tu aies aussi des attributs comme border-left-color, border-right-color, border-top-color et border-bottom-color, qui te permettent de définir à chaque fois "un coté" du bord

C'est très exactement ce que fait le code de aRaMinet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
border-color: 
/* top    */	qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
/* right  */	red
/* bottom */	qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 blue, stop: 1 red)
/* left   */	blue;

Malheureusement, ce n'est apparemment pas aussi simple : le border-top-color à lui seul donne

L'application de l'image en attaché avec le CSS border-image: url(":/images/gradient") 6; me donne le rendu suivant :

Ça fait un peu bricolage par rapport au CSS d'origine, mais j'ai pas trouvé mieux.