Forum d'entraide utilisateurs Overblog

tu peux utiliser un générateur de dégradé en css3 genre  http://gradcolor.com/
sur mon blog test par exemple le background est différent en accueil et sur les articles.

(bleu a noir en accueil et l'inverse sur les pages articles)

ce qui donne comme code:

                /* MON CSS*/
                      
               
body { background: {% if isIndex %} background-image: linear-gradient(bottom, rgb(23,25,26) 71%, rgb(13,115,179) 97%);
background-image: -o-linear-gradient(bottom, rgb(23,25,26) 71%, rgb(13,115,179) 97%);
background-image: -moz-linear-gradient(bottom, rgb(23,25,26) 71%, rgb(13,115,179) 97%);
background-image: -webkit-linear-gradient(bottom, rgb(23,25,26) 71%, rgb(13,115,179) 97%);
background-image: -ms-linear-gradient(bottom, rgb(23,25,26) 71%, rgb(13,115,179) 97%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.71, rgb(23,25,26)),
    color-stop(0.97, rgb(13,115,179))
);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.57, rgb(23,25,26)),
    color-stop(0.89, rgb(13,115,179))
);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.54, rgb(41,45,48)),
    color-stop(0.85, rgb(13,115,179))
);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.54, rgb(0,117,189)),
    color-stop(0.88, rgb(20,23,36))
);



background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.64, rgb(217,69,15)),
    color-stop(0.89, rgb(19,43,54))
);{% else %}background-image: linear-gradient(bottom, rgb(84,89,102) 15%, rgb(40,156,219) 55%, rgb(32,31,48) 84%);
background-image: -o-linear-gradient(bottom, rgb(84,89,102) 15%, rgb(40,156,219) 55%, rgb(32,31,48) 84%);
background-image: -moz-linear-gradient(bottom, rgb(84,89,102) 15%, rgb(40,156,219) 55%, rgb(32,31,48) 84%);
background-image: -webkit-linear-gradient(bottom, rgb(84,89,102) 15%, rgb(40,156,219) 55%, rgb(32,31,48) 84%);
background-image: -ms-linear-gradient(bottom, rgb(84,89,102) 15%, rgb(40,156,219) 55%, rgb(32,31,48) 84%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(84,89,102)),
    color-stop(0.55, rgb(40,156,219)),
    color-stop(0.84, rgb(32,31,48))
   
 
{% endif %};}



explication des codes twig:


{% if isIndex %   si page d'accueil


{% else %}   les autres pages


{% endif %};}  fermeture des balises twig

avantage du css3, tu ne fait pas appel à une image...c'est le code lui même qui génère le dégradé de couleur. (temps de chargement optimisé)

edit: pour info j'ai utilisé un dégradé a 3 couleurs sur les pages article..bleu foncé.....bleu clair.....;gris.....   (2 seulement en accueil)

 

tu crée une ligne que tu nomme 'mon css" par exemple
tu la met juste avant la balise "style" de ton blog (fin de ton css)

dans le code que je viens de te mettre tu vois body { background:

qui annule en fait la case body { background:  du debut de mon css d'origine

il me suffit de supprimer tous les codes mis dans "mon css" pour retrouver le background original.

j'ai affiner en ajoutant if is index ou if else...mais si je ne met pas ces balise twig, c'est tout le blog qui prendra la couleur du dégradé sans distinction de page d'accueil ou article.

sur mon accueil...j'ai un dégradé en fond de blog plus 4 fond différents utilisant des images  pour les 4 modules qui s'affiche

Bonjour,