IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Combiner des linear-gradients


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2008
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2008
    Messages : 14
    Par défaut Combiner des linear-gradients
    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.

  2. #2
    Membre averti
    Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2008
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2008
    Messages : 14
    Par défaut
    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.

  3. #3
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Salut stf57,

    Et avec une image ?

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

    Nom : Screenshot 2023-10-24 at 17-58-08 Document.png
Affichages : 206
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>

  4. #4
    Membre averti
    Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2008
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2008
    Messages : 14
    Par défaut
    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.

  5. #5
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    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>

  6. #6
    Membre averti
    Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2008
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2008
    Messages : 14
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 13/05/2007, 18h34
  2. Combiner des std::vector
    Par scorpion06 dans le forum SL & STL
    Réponses: 5
    Dernier message: 16/04/2007, 10h15
  3. [HTML] Combiner des tables
    Par zoreil dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 27/07/2006, 14h28
  4. Combiner des rotations
    Par WarDrone dans le forum OpenGL
    Réponses: 3
    Dernier message: 05/03/2006, 11h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo