CSS3 прозрачный градиент похож на Photoshop ColorPicker

Question

Я пытаюсь создать прозрачный градиент с помощью CSS. Мне это нужно для приложения выбора цвета. У меня есть прозрачный PNG, который я мог бы использовать, но он имеет размер 20 КБ и будет запрашивать новый запрос HTTP. Код должен быть сверхлегким.

Вот что я сделал до сих пор: http://jsfiddle.net/78SEK/ Тот, что выше, хороший, а нижний сделан с помощью CSS.

Я также пробовал кое-что с HTML5 Canvas, но не смог получить точное совпадение. Есть ли способ, которым я мог бы сделать это? Thanx

Answer 1

Вам нужно всего 2 градиента. Один идет от белого к прозрачному слева направо, а другой - от прозрачного к черному сверху вниз:

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

Вы также можете сделать нижний градиент от черного до желаемого, а не прозрачного. Тогда ваш фон может быть любого цвета, а ваш div будет иметь желаемый эффект:

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

Если вы хотите программно изменить его, первый метод, вероятно, лучше, с нижним сплошным фоновым слоем.