WeBlog — блог про веб-программирование

CSS3 позволяет задавать градиенты без использования картинок.

Градиенты задаются следующим образом:

div {
     background-color: #1a82f7; /* fallback color */
     background-image: url(images/linear_bg_2.png); /* fallback image */
     background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Синтаксис для Mozilla:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Для WebKit (Safari, Chrome):

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Взято отсюда: http://css-tricks.com/css3-gradients/

Пара полезных сервисов для создания градиентов на CSS3:
http://gradients.glrzad.com/
http://www.westciv.com/tools/gradients/index.html

На втором есть еще несколько инструментов для создание эффектов на HTML5+CSS3.

This entry was posted on Monday, October 4th, 2010 at 8:07 am and is filed under CSS, Полезные ресурсы. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.