Градиенты с помощью CSS

16 Сен 2011

Бывали времена, когда мы городили графику для отображения градиентов на страницах сайтов. XXI век потихоньку наступает.
 Итак — градиент на CSS:

background-image: linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -o-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -moz-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -webkit-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
background-image: -ms-linear-gradient(bottom, rgb(152,104,116) 6%, rgb(183,136,151) 53%);
 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.06, rgb(152,104,116)),color-stop(0.53, rgb(183,136,151)));

И плюсом лечилка для остального

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)"; background-color: #CCC;

И для того, чтобы не поломать красоту — 

no-repiat

P.S. Очень хорошая статья про создание градиентов. В ней подробно описаны все принципы.

Share