Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] trouver des codes couleurs HTML brillant et dégradé ? :)
  • 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)
  • oui..le code est un peu long...lol

    c'est pour cela que j'ai mis tout en bas...avec     /* MON CSS*/   (pour que je le retrouve)


    ce qui fait aussi que mes numeros de ligne de codes sont souvent pas les même que les tiens....lol

                            
  •    /* MON CSS*/     annulant les background d'origine cité plus haut dans mon code...

    en css, c'est toujours la dernière informations qui prime sur les précédente, d'ou le fait de mettre les codes perso en bas de css.
                             
  • 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.
  • tu peux mettre une image de fond bien sur.....

    cela te donnera un code du genre

     background-image: url("adressedetonimage");background-repeat:repeat; background-position:center; background-attachment: fixed;
        color: #333333;


  • 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, 
    Pour du brillant tu peux utiliser un gif animé. 
    (comme sur mon blog)