On dirait que ça se dégrade

READ ME

Dégradés

# Red to Yellow to Red ?

  • Red to Yellow

    classe : .has-gradient-red-yellow

    var : --gradient-red-yellow

  • Yellow to Red

    classe : .has-gradient-yellow-red

    var : --gradient-yellow-red

# Blue(s) Section

  • (In)to the Blue

    classe : .has-gradient-to-blue

    var : --gradient-to-blue

  • Blue to Green

    classe : .has-gradient-blue-to-green

    var : --gradient-blue-to-green

  • Blue to Orange

    classe : .has-gradient-blue-to-orange

    var : --gradient-blue-to-orange

  • Blue to Red

    classe : .has-gradient-blue-to-red

    var : --gradient-blue-to-red

# Purple, Deep Blue, Pink and Orange

  • Purple to Orange

    classe : .has-gradient-purple-to-orange

    var : --gradient-purple-to-orange

  • Deep Blue to Orange

    classe : .has-gradient-deep-blue-to-orange

    var : --gradient-deep-blue-to-orange

  • Pink to Orange

    classe : .has-gradient-pink-to-orange

    var : --gradient-pink-to-orange

 <ul class="box-list">
    <!-- Re to Yellow (small shadow) -->
    <li class="box-item">
        <article>
            <!-- Le nom de la classe -->
            <h4 class="box flex-center gradient-red-yellow has-small-shadow txt-color-5">gradient-red-yellow</h4>

            <!-- Les INFOS de la couleur -->
            <div>
                <!-- classe -->
                <p><strong>classe</strong> : .gradient-red-yellow</p>

                <!-- variable -->
                <p><strong>var</strong> : --gradient-red-yellow</p>

            </div>
        </article>
    </li>

</ul>
 

Notes

 /* VARIABLES */
    
    --gradient-red-yellow :
        linear-gradient(
            50deg,
            var(--color-4) 0%,
            var(--color-3) 51%,
            var(--color-2) 100%); 
    
    --gradient-yellow-red :
        linear-gradient(
            50deg,
            var(--color-2) 0%,
            var(--color-3) 51%,
            var(--color-4) 100%);
    
    --gradient-to-blue :
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            var(--color-1)
        ); 
    
    /* Experimental */
    --gradient-blue-to-green :
        linear-gradient(
            45deg,
            rgba(0,132,193,1) 28%,
            rgba(2,190,138,1) 100%);
    
    --gradient-blue-to-orange : 
        linear-gradient(
            22deg,
            rgba(102,205,170,1) 0%,
            rgba(253,130,29,1) 74%);
    
    --gradient-blue-to-red : 
        linear-gradient(
            22deg,
            rgba(102,205,170,1) 0%,
            rgba(253,51,29,1) 76%);
    
    
    /* B, W et Gray */
    
    --gradient-to-black: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(0, 0, 0, 1)
        ); /* background-image */
    
 
    --gradient-black-to-white: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1),
            rgba(255, 255, 255, 0)
        ); /* background-image */
    
    --gradient-to-white: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        ); /* background-image */
    
    --gradient-to-gray: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 50%,
            rgba(238, 238, 238, 1)
        ); /* background-image */

    
    --gradient-orange-red:
        linear-gradient(
            to right top,
            #ff9000,
            #fe811d,
            #fa732c,
            #f56637,
            #ee5941
        );

/* CLASSES */
.has-gradient-red-yellow {
    background-image: var(--gradient-red-yellow);
}

.has-gradient-yellow-red {
    background-image: var(--gradient-yellow-red);
}

.has-gradient-to-blue {
    background: var(--gradient-to-blue);
}

.has-gradient-blue-to-green {
    background: var(--gradient-blue-to-green);
}

.has-gradient-blue-to-orange {
    background: var(--gradient-blue-to-orange);
}

.has-gradient-blue-to-red {
    background: var(--gradient-blue-to-red);
}

.has-gradient-to-black {
    background: var(--gradient-to-black);
}

.has-gradient-to-white {
    background: var(--gradient-to-white);
}

.has-gradient-orange-red {
    background: var(--gradient-orange-red);
}

/* Sommets de boites */
.has-gradient-black-top {
    position: relative;
}

.has-gradient-black-top::before {
    position: absolute;
    top: -25vh;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 25vh;
    background-image: var(--gradient-to-black);
}

/* Annuler les dégradés de fond sur (cf .image-banner--header) */
.has-no-gradient {
    background-image: none!important;
} 

Notes

Où ça se trouve ?

Dans le fichier /base/_shades.scss

Back to Top