FANDOM


  • Bonjour,

    Je me met aussi aux tutos maintenant ^^ mais contrairement à MB, je m'adresse à des utilisateurs Avancés qui connaissent déjà assez bien les codes.

    Le soucis des Dégradés

    Vous avez tous sûrement déjà vu un dégradé sur une BABB, mais le problème, c'est que les dégradés ne se voient pas sous Mozilla Firefox, qui est quand même un navigateur assez utilisé. En effet, pour faire un dégradé, il faut un code différent pour Chrome et Firefox, et si vous ne mettez que le code pour le dégradé de chrome ou inversement, l'autre navigateur affichera un fond transparent, ce qui est gênant parfois au niveau de la lisibilité. Je suis allée sur Firefox, et j'ai vu que c'était le cas de tout les dégradés sur les BABB sauf le mien et celui de Fuji (ce qui est très peu).

    J'écris donc un Fil pour vous donner les codes entre les différents navigateurs. Il y a aussi un code différent pour Internet Explorer : si quelqu'un utilise encore ce navigateur, qu'il me le dire, je donnerai les codes pour IE aussi. Alors faites les deux codes, et à bas le racisme de Firefox ! /sort/

    Introduire les deux codes différents

    Pour cela, il faut mettre dans style :

    background:code-pour-chrome; background:code-pour-mozilla;
    

    Le fait qu'il y ait deux background n'est pas gênant.

    Codes pour un dégradé horizontal

    Chrome :

    background:-webkit-gradient(linear, 0% 0%, 90% 0%, from(COULEUR1), to(COULEUR2));
    

    Firefox :

    background:-moz-linear-gradient(100% 9% 196deg,COULEUR1, COULEUR2);
    

    Exemple : Rendu :

    Code :

    <div style="background:-webkit-gradient(linear, 0% 0%, 90% 0%, from(HotPink), to(RoyalBlue)); background:-moz-linear-gradient(100% 9% 196deg,Hotpink, RoyalBlue); height:10px;"></div>
    


    Codes pour un dégradé vertical

    Chrome :

    background:-webkit-gradient(linear, 50% 100%, 50% 15%, from(COULEUR1), to(COULEUR2));
    

    Firefox :

    background:-moz-linear-gradient(50% 0% 270deg,COULEUR2, COULEUR1);
    

    /!\ L'ordre des couleurs n'est pas le même dans les deux codes, faites attention ! /!\ Exemple : Rendu :

    Code :

    <div style="background:-webkit-gradient(linear, 50% 100%, 50% 15%, from(HotPink), to(RoyalBlue)); background:-moz-linear-gradient(50% 0% 270deg,RoyalBlue, HotPink); height:50px;"></div>
    

    Divers

    Voilà, en espérant que mes codes vous aideront et que vous réussirez à faire de jolis choses visibles sous Firefox et Chrome ^^ (Opéra marche aussi avec le code de Chrome et Waterfox avec le code de Firefox).

    N'hésitez pas à me dire si ça vous est utile, et si vous voulez que je fasse un Tuto sur quelque chose ! Merci de votre lecture ;)

    Liste des Liens utiles
    TUTO sur la création d'un Index
    TUTO sur Div et les différences contenances du style
    TUTO sur les dégradés
    Générateur de Dégradés Chrome/Firefox
    Liens en vrac
    Liste des couleurs


    PS : Je précise, j'ai mis un lien vers un générateur dans l'index, mais bien sûr le générateur ne marche pas sur votre mauvais navigateur, et ces codes sont surtout là pour vous éviter de faire des allers-retours entre vos navigateurs, et pour vous éviter d'installer l'autre navigateur si vous ne l'avez pas.

      Chargement de l’éditeur...
Sélectionner ce message
Vous avez sélectionné ce message !
Voir qui a sélectionné ce message
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .