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 ;)

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.