CSS3 градиенты, метод linear-gradient

CSS3 Рейтинг: +1 Голосов: 1 5545 просмотров
CSS3 градиенты, метод linear-gradient

Градиенты поддерживается во всех современных браузерах, но требует добавления специального префикса. Для браузера IE10+ требуется префикс -ms, для Chrome и Safari префикс -webkit, для Opera префикс -o и для Firefox префикс -moz.
В CSS2.1 градиенты реализовывались в виде отдельных картинок вставляющихся как фоновые, в CSS3 имеются встроенные свойства для создания градиентов.

Так как в CSS3 сам браузер отрисовывает градиенты необходимость дополнительных запросов градиентных картинок у сервера отпадает и это позволяет увеличить скорость загрузки страниц.
Линейные градиенты создаются с помощью CSS3 метода linear-gradient, который должен указываться в значение свойства background.
Для того, чтобы создать линейный градиент необходимо указать его направление (может задаваться с помощью ключевых слов или градусов) и цвета перехода.

Пример 1:


linear-gradient



Код:

#wrap1 {
background:linear-gradient(top,white,black);
}

Пример 2:


CSS3 градиенты



Код:


#wrap2 {
background:linear-gradient(left,white,black);
}


Пример 3:


CSS3 градиенты



Код:


#wrap3 {
background:linear-gradient(0deg,white,black);
}


Пример 4:


CSS3 градиенты



Код:


#wrap4 {
background:linear-gradient(270deg,white,black);
}


Цвета перехода - это цвета, которые принимает градиент в определенных его точках, например градиент, который плавно изменяет цвет с белого на черный имеет белый цвет перехода в начальной точке и черный в конечной.
Линейные градиенты могут иметь неограниченное количество цветов перехода.
Вы можете указывать координаты местоположения цветов с помощью % (0% подразумевает начало градиента, 100% конец).

Пример 5:



CSS3 градиенты



Код:


#wrap5 {
background:linear-gradient(left,white 0%,green 50%,black 100%);
}


Пример 6:



CSS3 градиенты



Код:


#wrap6 {
background:linear-gradient(left,#8F04A8 0%,#7CE700 60%,#FFE100 100%);
}



Радиальные градиенты свойство radial-gradient.



С помощью radial-gradient Вы можете создавать сферические градиенты.

Синтаксис определения сферических градиентов очень похож на синтаксис линейных,
но требует также задания формы градиента (сферы или эллипса).

Пример 7:



CSS3 градиенты



Код:

#wrap7 {
background:radial-gradient(white 20%,black 40%);
}


Пример 8:



CSS3 градиенты



Код:

#wrap8 {
background:radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
}


 

Повторяющиеся полосы с помощью методов repeating-linear-gradient



Повторяющиеся градиенты задаются с помощью CSS3 repeating-linear-gradient (создает повторяющийся линейный градиент) а так же repeating-radial-gradient (повторяющийся сферический градиент).
Для того, чтобы создать повторяющийся градиент Вы должны указать направление градиента, цвета перехода и расстояние (ширину полос).

Пример 9:



CSS3 градиенты



Код:


#wrap9 {
background:repeating-linear-gradient(50deg,white,white 5px,black 5px,black 10px);
}


Пример 10:



CSS3 градиенты



Код:


#wrap10 {
background:repeating-radial-gradient(circle,#8F04A8 0%,#5D016D 40%,black 60%);
}

Комментарии (1)
artnikov #
Рейтинг: 0
Доброго времени суток. А вот один вопрос, достаточно важный(на мой взгляд) ВЫ все таки упустили. Наверно стоит отметить, что использование не валидных правил, все таки остается на усмотрение разработчика. И определение разными браузерами данных правил происходит по разному. Хотя если честно, валидатору css 3, давно пора включить многие правила, только вот они не торопятся... . А жаль. С удовольствием бы применил без скриптов, новые свойства, scale, linear-gradient,column и тд.

Случайное в статьях

Как работать с плагинами и компонентами в Joomla: подробные инструкции
После установки Joomla вы наполняете сайт контентом, но просто материала и...
skaz - 0 - 4323
Joomla 3.6.X установка на Open Server.
В данной статье рассмотрим установку одного из популярных движков Joomla версий 3.Х.Х...
skaz - 0 - 3114
Open Server, создание базы данных.
В пред идущей статье мы создавали пользователя базы данных в Open Server. Теперь мы...
skaz - 0 - 9489
Введение в CMS для новичков
Наверное, каждый пользователь интернета хотя бы раз приходил к мысли создания...
skaz - 0 - 2453
От монетизации до пессимизации один шаг?
Предпринимая различные действия по монетизации своего сайта, необходимо учитывать...
skaz - 0 - 3714
Перелинковка сайта. Методы и схемы.
Один из способов продвижения сайта в поисковых системах, это внутренняя оптимизация...
skaz - 1 - 5094