Combiner des linear-gradients

**stf57** · 24/10/2023, 10h57

Bonjour,
Pour un formulaire d'évaluation, je dois afficher des radio groups que je n'arrive pas à styliser comme je le souhaite.
J'ai pour le moment 2 versions à base de linear-gradients, et l'idée serait d'arriver à les fusionner, mais je ne trouve pas la bonne syntaxe.
Voici mes 2 formes actuelles.

Le version finale serait la forme du bas mais avec les couleurs du haut.
Le CSS de la verison rainbow est

Code :

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

1
2
3
4
5
6
.rainbow {
    background:linear-gradient(to right, red, orange, yellow, lime, green);
    width: 500px;
    height: 40px;
    border-radius: 20px;
}

Et le CSS de la version en triangle est

Code :

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

1
2
3
4
5
.triangle {
    background: linear-gradient(174.3deg, transparent 48%, antiquewhite 50%);
    width: 500px;
    height: 50px;
}

Une idée de comment je peux remplacer mon antiquewhite par une suite de couleur ?

J'ai aussi essayé de superposer mes 2 DIVs (fond ranbow puis un triangle fait de blanc et transparent), mais je n'arrive pas à les afficher dans le bon ordre en utilisant z-index.

Merci.

**stf57** · 24/10/2023, 11h22

Des fois, juste écrire son problème permet de mieux le comprendre soit même, j'ai trouvé un moyen d'afficher mon radio group comme je le veux.
J'utilisais des DIVs imbriquées, alors qu'il fallait les placer l'une après l'autre en jouant sur les positions relatives et absolues.
Le

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrapper">
    <div class="triangle-mix">
    </div>
    <div class="rainbow-mix">
    </div>
    <div class="rg top-index">
        <input type="radio" name="test5" id="6a" class="swiper"><label for="6a"><div>0</div></label>
        <input type="radio" name="test5" id="6b" class="swiper"><label for="6b"><div>1</div></label>
        <input type="radio" name="test5" id="6c" class="swiper"><label for="6c"><div>2</div></label>
        <input type="radio" name="test5" id="6d" class="swiper"><label for="6d"><div>3</div></label>
        <input type="radio" name="test5" id="6e" class="swiper"><label for="6e"><div>4</div></label>
    </div>
</div>

Et le CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.wrapper {
    position: relative;
    width: 500px;
    height: 50px;
    margin-top: 50px;
}
.rainbow-mix {
    position: absolute;
    top: 0;
    left: 0;
    background:linear-gradient(to right, red, orange, yellow, lime, green);
    width: inherit;
    height: inherit;
    z-index: 1;
}
.triangle-mix {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(174.3deg, white 48%, transparent 50%);
    width: inherit;
    height: inherit;
    z-index: 2;
}
.top-index {
    position: relative;
    width: inherit;
    height: inherit;
    z-index: 3;
}

Ce qui donne

Après, si vous avez d'autres moyens plus propres/efficaces pour obtenir ce résultat, je suis preneur.

**ASCIIDEFOND** · 24/10/2023, 18h01

Salut stf57,

Et avec une image ?

Nom : imgcursor.png
Affichages : 184
Taille : 9,0 Ko

Nom : Screenshot 2023-10-24 at 17-58-08 Document.png
Affichages : 183
Taille : 16,2 Ko

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 500px;
      height: 50px;
      margin-top: 50px;
    }
 
    .rainbow-mix {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      z-index: 1;
      background: url('./imgcursor.png') no-repeat;
      background-size: contain;
    }
 
    .rg {
      position: absolute;
      width: 100%;
      height: 50px;
    }
 
    .rg label {
      position: relative;
      display: inline-block;
      text-align: center;
      margin: 0 35px 0 35px;
      z-index: 999;
    }
 
    .rg label p {
      width: 20px;
      border: 3px solid transparent;
      height: 50px;
      vertical-align: middle;
      display: table-cell;
    }
 
    .rg input {
      display: none;
    }
 
    label p:hover {
      border: 3px solid red;
      font-size: 2em;
    }
  </style>
</head>
 
<body>
 
  <div class="wrapper">
    <div class="triangle-mix"></div>
    <div class="rainbow-mix"></div>
    <div class="rg top-index">
      <input type="radio" name="test5" id="6a" class="swiper" /><label for="6a">
        <p>0</p>
      </label>
      <input type="radio" name="test5" id="6b" class="swiper" /><label for="6b">
        <p>1</p>
      </label>
      <input type="radio" name="test5" id="6c" class="swiper" /><label for="6c">
        <p>2</p>
      </label>
      <input type="radio" name="test5" id="6d" class="swiper" /><label for="6d">
        <p>3</p>
      </label>
      <input type="radio" name="test5" id="6e" class="swiper" /><label for="6e">
        <p>4</p>
      </label>
    </div>
  </div>
</body>
 
</html>

**stf57** · 25/10/2023, 12h51

Salut ASCIIDEFOND,
Merci pour ta réponse.
J'y avais déjà pensé, mais j'avais plusieurs problèmes de rendu.
Déjà, impossbile pour moi d'avoir un beau rendu comme le tien, je suis nul en dessin (et avec les outils de dessin) et j'ai pas la patience.

Partant de mon cas de test, tu es parti sur une image en 500*50.
Si dans ma page je veux au final changer la taille de mon wrapper, tant que je reste sur un ratio 10*1, ça fonctionne. Mais si je change le ratio (800*50 ou 150*20 que je vais devoir utiliser), l'image ne s'adapte pas.
Pour le linear-gradient, ça s'adpate quel que soit le ratio. Il faut juste remplacer l'angle exprimé en degré par "to bottom right" (problème auquel je n'ai pas encore pensé, découvert ce matin).

Et si je change ma couleur de fond, la transition entre le fond et le rainbow est moins nette en utilisant une image, surtout avec un couleur un peu sombre.

**ASCIIDEFOND** · 25/10/2023, 13h03

Une autre solution sans image ?

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        :root {
            --main-BakgroundColor: white;
            --main-BakgroudLineargradient: linear-gradient(to left, red, orange, yellow, lime, green);
            --main-Height: 50px; /* Hauteur du gradient */
            --main-Width: 500px; /* Longueur */
            --main-FontSize: 1.2em; /* Taille police */
            --main-MarginLeft: 35px; /* Déterminer l'espacement des labels avec la console */
        }
 
        .wrapper {
            position: relative;
            display: inline-block;
            height: var(--main-Height);
            width: var(--main-Width);
            background: var(--main-BakgroudLineargradient);
            z-index: 999;
        }
 
 
        .rainbow-mix {
            border-bottom: var(--main-Height) solid transparent;
            border-left: var(--main-Width) solid var(--main-BakgroundColor);
 
        }
 
        .rg {
            position: absolute;
            width: inherit;
            top: 0;
        }
 
        .rg label {
            font-size: var(--main-FontSize);
            text-align: center;
            vertical-align: middle;
            margin: var(--main-MarginLeft);
           
        }
 
        .rg label p {
            position: relative;
            top: 0;
            width: 20px;
            border: 3px solid transparent;
            height: var(--main-Height);
            vertical-align: middle;
            display: table-cell;
        }
 
 
        .rg input {
            display: none;
        }
 
        label p:hover {
            border: 3px solid red;
            font-weight: bold;
        }
    </style>
 
</head>
 
<body>
 
    <div class="wrapper">
        <div class="triangle-mix"></div>
        <div class="rainbow-mix"></div>
 
        <div class="rg top-index">
            <input type="radio" name="test5" id="6a" class="swiper" /><label for="6a">
                <p>0</p>
            </label>
            <input type="radio" name="test5" id="6b" class="swiper" /><label for="6b">
                <p>1</p>
            </label>
            <input type="radio" name="test5" id="6c" class="swiper" /><label for="6c">
                <p>2</p>
            </label>
            <input type="radio" name="test5" id="6d" class="swiper" /><label for="6d">
                <p>3</p>
            </label>
            <input type="radio" name="test5" id="6e" class="swiper" /><label for="6e">
                <p>4</p>
            </label>
        </div>
 
    </div>
 
</body>
 
</html>

**stf57** · 25/10/2023, 14h04

Ca c'est nickel comme forme, le triangle est clairement mieux dessiné, les 2 pointes sont plus nettes et le code est plus simple.
Un grand merci pour ton aide.

**NoSmoking** · 30/10/2023, 16h23

Bonjour,

...et le code est plus simple.

Quelques remarques quand même.

Les éléments en display:none, ici les <input>, ne sont pas soumis lors de la validation d'un formulaire.
On ne met pas d'élément <p> dans un élément <label> c'est « HTMLlement » incorrect.

La structure est bien complexe, si c'est juste pour mettre un fond on peut avantageusement utiliser un pseudo-élément, lui affecter le linear-gradient et clipper celui-ci en forme de triangle.

Sur base du HTML suivant :

Code html :

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

1
2
3
4
5
6
7
<div class="wrapper-radio">
  <input type="radio" name="rad" id="rad-0" value="0"><label for="rad-0">0</label>
  <input type="radio" name="rad" id="rad-1" value="1"><label for="rad-1">1</label>
  <input type="radio" name="rad" id="rad-2" value="2"><label for="rad-2">2</label>
  <input type="radio" name="rad" id="rad-3" value="3"><label for="rad-3">3</label>
  <input type="radio" name="rad" id="rad-4" value="4"><label for="rad-4">4</label>
</div>

... il suffit d'appliquer le CSS ci-dessous pour obtenir le même résultat :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.wrapper-radio {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  width: 26em;
  height: 2.5em;
  font-size: 1.2em;
}
.wrapper-radio:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, red, orange, yellow, lime, green);
  clip-path: polygon(0 100%,100% 0,100% 100%,0 100%);
}
.wrapper-radio input {
  position: absolute;
  left: -9999em;
}
.wrapper-radio label {
  min-width: 1.25em;
  border: 3px solid transparent;
  text-align: center;
  line-height: 2.5;
}
.wrapper-radio label:hover {
  border: 3px solid #F00;
  font-weight: bold;
}

**stf57** · 30/10/2023, 18h51

Bonjour NoSmoking,
Pour le Display: none;, c'est ma faute, test case vite fait. Normalement, j'utilise transform: scale(0); pour masquer mes inputs dans un formulaire. C'est acceptable, ou il vaut mieux utiliser ta méthode ?

J'aime bien ton code, même si je n'ai pas bien saisi le :before et le clip-path, faut que je creuse plus la question.
Et dire que je pensais bien connaitre CSS

**NoSmoking** · 31/10/2023, 18h32

C'est acceptable, ou il vaut mieux utiliser ta méthode ?

il existe plusieurs façons de masquer un <input> à l'écran, certaines étant à bannir pour problème d'accessibilité, clavier ou lecteur d'écran.

Ci dessous un petit florilège de ce que l'on peut faire (pas forcément exhaustif) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masquer les input</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2157669">
<meta name="category" content="Css">
<meta name="description" content="Différentes façons de masquer des &lt;input&gt; à l'écran.">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #666;}
main {display: block;margin: auto;max-width: 60em; padding: .25em;}
section {position: relative;margin: 0 1em 1em;}
section > :not(h2) {margin-left: 1em !important;}
code {color: #069;font-size: 1.2em;font-family: monospace;}
</style>
<style id="css-demo">
#demo-radio p {
  margin-top: 0;
  text-indent: .5em;
  line-height: 2;
}
#demo-radio label {
  display: block;
  background-color: #DEF;
  cursor: pointer;
}
#demo-radio [type="radio"]:checked + label {
  font-weight: 700;
  background-color: #EFD;
}
</style>
</head>
<body>
  <main>
    <header>
      <time datetime="2023-10-30">Oct. 2023</time>
      <h1>Différentes façons de masquer des &lt;input&gt; à l'écran.</h1>
    </header>
 
    <div id="demo-radio">
      <code>style="display: none;"</code>
      <p>
        <input name="rad" type="radio" id="rad-1" value="1" style="display: none;">
        <label for="rad-1">Radio #1</label>
      </p>
      <code>hidden="hidden"</code>
      <p>
        <input hidden="hidden" name="rad" type="radio" id="rad-2" value="2">
        <label for="rad-2">Radio #2</label>
      </p>
      <code>style="position: absolute;visibility: hidden;"</code>
      <p>
        <input name="rad" type="radio" id="rad-3" value="3" style="position: absolute;visibility: hidden;">
        <label for="rad-3">Radio #3</label>
      </p>
      <code>style="position: absolute;appearance: none;"</code>
      <p>
        <input name="rad" type="radio" id="rad-4" value="4" style="position: absolute;appearance: none;">
        <label for="rad-4">Radio #4</label>
      </p>
      <code>style="position: absolute;opacity: 0;"</code>
      <p>
        <input name="rad" type="radio" id="rad-5" value="5" style="position: absolute;opacity: 0;">
        <label for="rad-5">Radio #5</label>
      </p>
      <code>style="position: absolute;left: -9999em;"</code>
      <p>
        <input name="rad" type="radio" id="rad-6" value="6" style="position: absolute;left: -9999em;">
        <label for="rad-6">Radio #6</label>
      </p>
      <code>style="position: absolute;clip-path: inset(50%);"</code>
      <p>
        <input name="rad" type="radio" id="rad-7" value="7" style="position: absolute;clip-path: inset(50%);">
        <label for="rad-7">Radio #7</label>
      </p>
      <code>style="position: absolute;scale: 0;"</code>
      <p>
        <input name="rad" type="radio" id="rad-8" value="8" style="position: absolute;scale: 0;">
        <label for="rad-8">Radio #8</label>
      </p>
    </div>
  </main>
</body>
</html>

Les Radio #1 à #3 sont à éviter, la #4 peut poser soucis mais les autres font bien le job.

Nota : La position:absolute permet de sortir l'<input> du flux de la page pour éviter que celui-ci n'interfère avec le reste de la page.

Et dire que je pensais bien connaitre CSS

je te rassure même moi j'ai des lacunes, mais il ne faut pas l'ébruiter

**stf57** · 02/11/2023, 10h46

Merci pour les exemples, y'a pas mal de variantes auquelles je n'aurais jamais pensé.

Combiner des linear-gradients

CSS

Discussions similaires

Partager

Partager