• Gradients

    Vous connaissez les gradients, qui sont une couleur de fond en dégradé, soit d'une même couleur, soit de plusieurs couleurs.

    Pour se simplifier la vie, j'utilise un générateur de gradients en ligne: http://www.colorzilla.com/gradient-editor/

    Les gradients ont un inconvénient qui est de ne pas forcément être lu de la même façon par différents navigateurs; il faut écrire une ligne de code pour certains.

    Je vais essayer de vérifier ici, s'il existe un seul code lu par Chrome, Firefox et Opera; je suis sous Linux Ubuntu 16.04.

     

    <p id="gr1">&nbsp;</p>
    <p>...</p>
    <style><!--
    #gr1{width:20vw; height:30vh; border:0.1vw solid black; margin:1vh auto; background: linear-gradient(to top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);}
    --></style>

    Ok sur sur Firefox 49.0.

    OK sur Chrome 52.0.2743.116-0ubuntu0.16.04.1.1250

    OK sur Opera  40.0.2308.62


    Ce premier point étant vu, reprenons les codes fournis par le site Colorzilla, selo nvos choix:

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
    background: rgb(167,207,223); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */

    Vous disposez de codes multiples mais il semble, d'après ce que je fais ici, qu'une seule suffise; vous me direz d'ailleurs, selon votre navigateur, si la lecture de cette page ne vous pose pas de difficulté.

    Dégradé vertical: Le code ici est écrit avec un dégradé du haut vers le bas: to bottom=vers le bas; le code fourni est souvent dirigé vers le haut, selon le modèle choisi et le code commence par (to top,...): à modifier.

    Dégradé horizontal: le sens est to right (vers la droite) mais vous pouvez le modifier en to left.


    Le second point est de vérifier si, ce dégradé, peut être installé sur le code de http://papyrocktest.eklablog.com/ pour le montage: menu spirale suite à une demande du petit randonneur.

    On peut remplacer ses codes gradients par le seul code, du genre ci-dessus, dans les couleurs (2 ou +) et le dégradé choisi.

    Modifiez le dégradé au départ et le dégradé au survol, selon vos choix.