CSS3 transparent dégradé similaire à Photoshop ColorPicker

Question

J'essaie de créer un dégradé transparent avec CSS. J'en ai besoin pour une application de sélection de couleur. J'ai un PNG transparent que je pourrais utiliser mais il est de 20kb et demanderait une nouvelle requête HTTP. Le code devrait être ultra-léger.

Voici ce que j'ai fait jusqu'à présent: http://jsfiddle.net/78SEK/ Celui ci-dessus le bon et le bas est fait avec CSS.

J'avais aussi quelque chose avec HTML5 Canvas mais je ne pouvais pas obtenir la correspondance exacte. Y a-t-il un moyen de le faire? Thanx

Answer 1

Vous avez seulement besoin de 2 dégradés. Un va du blanc à gauche transparent à droite, et celle qui va de la transparence en haut noir en bas:

http://jsfiddle.net/SKFRS/

HTML:

<div id="white_grad"><div id="black_grad"></div></div> 
<p>CSS3 Gradient</p> 

CSS:

#white_grad { 
    background:-moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) repeat scroll 0 0 transparent; 
    height:255px; 
    width:255px; 
} 

#black_grad { 
    background:-moz-linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)) repeat scroll 0 0 transparent; 
    border:1px solid #333333; 
    height:255px; 
    width:255px; 
} 

Vous pourriez faites également passer le dégradé du bas du noir à la couleur désirée, pas transparent. Ensuite, votre arrière-plan pourrait être une couleur, et votre div aurait encore l'effet désiré:

http://jsfiddle.net/SKFRS/3/

Si vous voulez changer programatically il, la première méthode est probablement mieux, avec une couche de fond solide fond.