• Dégradés

    J'ai déjà abordé ce sujet en dirigeant vers un site qui nous donne les codes de couleurs en dégradé (gradient) , sous différentes dispositions : http://www.colorzilla.com/gradient-editor/

    Mais revenons à la façon de définir une couleur de fond ou non.

    En nom anglais: blue white red  (bleu, blanc rouge) ce qui, pour un fond; donne: background:yellow;

    En code hexadécimal: #0000ff pour le bleu, #ffffff pour le blanc et #ff0000 pour le rouge ce qui donne: background:#ffff00; pour le jaune !

    En code rgba avec transparence et c'est ce dernier que nous allons exploiter dans cette page: rgba(0,0,255,1) pour le bleu, rgba(255,255,255,1) pour le blanc et rgba(255,0,0,1) pour le rouge

    ce qui donne background:rgba(255,255,0,1) pour le jaune.

    Le dernier chiffre (1) correspond à la transparence: 1= opaque et 0= transparent avec toutes les valeurs intermédiaires en 0.15/0.27....

    Un générateur gratuit en ligne vous donne la correspondance entre ces différentes unités: http://www.proftnj.com/RGB3.htm


    Mais revenons au dégradé (gradient): le site indiqué fournit un code avec des couleurs hexadécimales, du genre: background:linear-gradient(to bottom,#0000ff 0%, #ffffff 100%);, qui va donner:

     

    <p style="width: 150px; height: 150px;  border: 2px solid black; background: linear-gradient(to bottom,#0000ff 0%, #ffffff 100%);">&nbsp;</p>


    Ces dégradés peuvent utiliser plusieurs couleurs, placées selon notre choix, et en importance réglable.

     

     

    <p style="width: 150px; height: 150px;  border: 2px solid black; background: linear-gradient(to bottom,#0000ff 0%, #ffffff 50%, #ff0000 100%);">&nbsp;</p>

    <p style="width: 150px; height: 150px;  margin: 0 0 0 20px; border: 2px solid black; background: linear-gradient(to right,#0000ff 0%, #0000ff 33%,#ffffff 33%,#ffffff 66%, #ff0000 66%, #ff0000 100%);">&nbsp;</p>


    Ces exemples utilisent des couleurs sans transparence ce qui, en fond, n'est pas gênant en principe mais on peut souhaiter un fond plus discret.

    De plus, ces dégradés, placés au dessus des iamges, vont nous permettre de créer des masques semi-transparents.

    Mais revenons d'abord à de la transparence sur le fond; le site de référence, qui nous fournit un code avec couleurs hexadécimales peut être modifié en couleur rgba.

     

     

    <p style="width: 150px; height: 150px;  clear: left; border: 2px solid black; background: linear-gradient(to bottom,rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);">&nbsp;</p>


    Sur le site des gradients, vous voyez que vous avez le choix de l'orientation du dégradé: vertical, horizontal, diagonal (2) et radial.

    De plus, dans le code, vous pouvez inverse le sens linear-gradient(to top,..); ou linear-gradient(to bottom,...);


    Voyons maintenant le sujet que je voulais vous présenter: un masque radial, au dessus d'une image, pour créer comme un halo sur un sujet.

    Le masque radial sera créé en choisissant une bordure foncée semi-transparente sur les bords et un centre transparent, en utilisant la caractéristique des codes rbga: dernier chiffre=0;

     

    <p style="width: 150px; height: 150px; float: left; border: 2px solid black; background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);">&nbsp;</p>


    Modifions notre code pour définir le diamètre du cercle transparent.

     

    <p style="width: 150px; height: 150px; float: left; border: 2px solid black; background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,8) 100%);">&nbsp;</p>


    Il ne nous reste qu'à placer une image sous ce masque pour obtenir le résultat souhaité.

     

    <div style="width: 800px; height: 450px; margin: 0 auto; border: 4px ridge white; background: url('http://ekladata.com/7UNr_mruzDN5urD2S8suPot1MjU.jpg'); background-size: 800px 450px;">
    <p style="width: 800px; height: 450px; background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);">&nbsp;</p>
    </div>