• Fond modèle 1

    Une couleur en dégradé est bien pratique pour présenter plusieurs vignettes car elle ne surcharge pas l'affichage tout en ayant un aspect esthétique.

    Je vous ai déjà proposé un site gratuit qui vous propose le code du fond que vous choisissez, dans un grand choix: http://www.colorzilla.com/gradient-editor/

    Si vous regardez les codes qu'il vous propose, vous pouvez personnaliser les couleurs et même le dégradé mais je ne vais faire qu'effleurer le sujet en ne reprenant que les principes.

    Les couleurs en rgba,  qui autorise la transparence peuvent être choisie: http://www.proftnj.com/RGB3.htm

    Une couleur en rgba s'écrit:rgba(rouge vert bleu opacité); le chiffre de l'opacité va de 0=transparent à 1=opaque.

     
    <div style="width: 32vw; height: 18vw; border: 0.4vh ridge white; margin: 0 2vh 0 0; background: linear-gradient(to bottom,rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);">&nbsp;</div>

    background:linear-gradient commande un dégradé de 2 ou plusieurs couleurs.
    to-bottom: le dégradé part du haut vers le bas donc 0%=haut et 100%=bas.L'inverse pour to-top.
    rgba(0=noir,0=noir,0=noir,0.7=valeur de l'opacité

    Si vous voulez faire des essais, modifiez les 0 par d'autre chiffres entre 0 et 255; exemple:
    rgba(100,50,180,0.5); un violet !

    Voilà pour le code couleur: je vous invite à recopier la formule de mon cadre et de modifier ses valeurs de rgba

    De la même façon que nous créons un dégradé du haut vers le bas: background:linear-gradient(to-bottom,rgba(x,x,x,x) 0%,rgba(x,x,x,x,) 100%;

    ou l'inverse:background:linear-gradient(to-top,rgba(x,x,x,x) 0%,rgba(x,x,x,x,) 100%;

    nous pouvons le faire aller de gauche à droite: background:linear-gradient(to-right,rgba(x,x,x,x) 0%,rgba(x,x,x,x,) 100%;

    ou de droite à gauche: background:linear-gradient(to-left,rgba(x,x,x,x) 0%,rgba(x,x,x,x,) 100%;

    Le site colorzilla nous propose un réglage en diagonale, dans les 2 sens: exemple: les codes couleurs qu'il propose sont en hexadécimal mais le site des couleurs rgba vous permet une correspondance Décimal/Héxadécimal.

     
    <div style="width: 32vw; height: 18vw; border: 0.4vh ridge white; margin: 0 2vh 0 0; background: linear-gradient(45deg, #f6e6b4 0%,#ed9017 100%);">&nbsp;</div>

     
    <div style="width: 32vw; height: 18vw; border: 0.4vh ridge white; margin: 0 2vh 0 0; background: linear-gradient(45deg, #ed9017 0%,#f6e6b4 100%);">&nbsp;</div>

    Le dégradé peut-être radial.

     
    <div style="width: 32vw; height: 18vw; border: 0.4vh ridge white; margin: 0 2vh 0 0; background: radial-gradient(ellipse at center, rgba(153,253,204,1) 0%,rgba(102,153,153,1) 20%,rgba(255,203,155,1) 55%,rgba(100,100,100,1) 60%,rgba(153,253,204,1) 80%);">&nbsp;</div>

    Je vous accorde que le résultat est curieux mais ce n'est qu'une démonstration de ce qu'il est possible de faire !

    Vous remarquerez que les couleurs sont en code rgba.