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

Question

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

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

Я также попробовал что-то с холстом HTML5, но я не смог получить точное соответствие. Есть ли способ, которым я мог бы это сделать? 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/

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