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

CSS3 Рейтинг: +1 Голосов: 1 5599 просмотров
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 и тд.

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

Что нужно знать о размещении сайта в интернете
Кто-то создаёт свой собственный сайт для того, чтобы проверить свои силы. Для...
skaz - 0 - 1816
Создание и виды сайтов: что важно знать?
Проживая в век цифровых технологий, мы можем наблюдать стремительное развитие сети...
skaz - 0 - 2083
Вопросы по Artisteer
Эта статья, написана в основном для тех кто не совсем точно представляет для чего...
skaz - 2 - 7661
Какие сайты можно сделать на Вордпресс?
Wordpress – это универсальный движок для создания сайтов, который позволяет...
skaz - 0 - 11752
Кросспостинг из Wordpress в Blogger
Многие пользователи интернета успешно ведут свои блоги на сервисе Blogger, и для...
skaz - 0 - 4754
Основы для создания своего сайта
Много людей хотят свой сайт. Ежесекундно поисковые системы получают запросы типа...
skaz - 0 - 2076