Bordure d'un QPushButton avec un dégradé

Version imprimable

1 pièce(s) jointe(s)

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:

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 8O

Pièce jointe 222806

Quelqu'un aurait-il une solution?

21/10/2016, 04h11
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 ;)

3 pièce(s) jointe(s)

Bonsoir,

Citation:

Envoyé par koala01

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:

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

Pièce jointe 223081

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

Pièce jointe 223090

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