вход

Линейные градиенты CSS3

Хитрости CSS которые вы должны знать

С приходом CSS3 появилась поддержка градиентов. Теперь можно легко создавать различные градиенты, например линейные и радиальные. Градиенты CSS поддерживаются в FF3.6+, Safari 2+ и Google Chrome. В FF3.6, могут быть применены к свойству "background-image" или к сокращенному свойству "background".

Синтаксис линейных градиентов CSS3 немного отличается в версиях Firefox и Safari/Chrome. Задаются они так:

-moz-linear-gradient(<точка> или <угол>, <остановка цвета>) /*Градиенты в Firefox*/

и:

-webkit-gradient(linear, <точка>, <остановка цвета>) /*Градиенты в Safari, Chrome*/

Где:

  • точка или угол: Начальная точка градиента. Значение может быть в процентах (%), в пикселах, или "left", "center", или "right" для горизонтального или "top", "center", или "bottom" для вертикального позиционирования. Если горизонтальные и вертикальные значения не заданы, то используется значение по умолчанию "center" или 50%. В Firefox также можно задачать угловые значения как 45deg.
  • остановка цвета: Области, в которых переход цвета начинается или заканчивается.Если указано более двух цветов без явного значения остановки для каждого цвета, градиент переходит от одного к другому равномерно.

Основная разница между FF и Safari в том, что FF использует систему "точка и угол", в то время как Safari использует систему "точка точка" в построении градиентов.

Примеры являются лучшим способом для изучения, так что давайте посмотрим несколько из них (IE и старые браузеры могут отображать градиенты только в изображениях):

1. Градиент слева направо

background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

2. Градиент справа налево

background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));

3. Градиент сверху вниз

background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

4. Градиент снизу вверх

background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));

5. Градиент слева сверху вправо вниз

background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

6. Градиент сверху справа вниз влево

background: -moz-linear-gradient(right top 225deg, #00abeb, #fff);
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));

7. Коротки градиент слева направо

Голубой цвет начинается вначале и заканчивается на 45% ширины блока. Остаток заполняет градиент белого цвета.

background: -moz-linear-gradient(left, #00abeb, #fff 45%);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));

8. Золотой градиент сверху слева вниз направо

Оранжевый градиент с 0 до 30% ширины. Желтый с 30% до 40%. Остаток белый градиент.

background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));

9. Симметричный градиент сверху вниз.

Переход от светлых тонов к темным и обратно

background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));

10. Цветной градиент слева направо

Плавный переход между семи цветов радуги.

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));

Использование CSS3 градиентов на сайтах

Тот факт, что CSS3 градиенты не поддерживаются всеми браузерами, не означает, что вы не можете использовать их. А те браузеры которые не поддерживают CSS3 градиенты, могут использовать обычные изображения с градиентами. Если вы беспокоитесь о тех, кто еще не сменил свои браузеры на более современные и сидит на старых версиях, сделайте два объявления в правилах. Проигнорировав CSS3 градиенты, такие браузеры будут использовать правила с обычными изображениями.

.gradient{
/*изображение с градиентом для старых версий*/
background: url(gradient.gif) top left repeat-y; 
background: -moz-linear-gradient(left, #00abeb, #fff) ;
background: -webkit-gradient(linear, left center, right center, 
			from(#00abeb), to(#fff));
}

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Линейные градиенты CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.