Приветствую вас, дорогие друзья!
Хотите узнать как легко и быстро создать красивый градиент CSS3 на вашем сайте? Причём данный градиент можно будет настраивать под любой дизайн.
Давайте я покажу вам несколько примеров и увидите что это действительно просто.
Навигация по статье:
Как создаётся линейный градиент CSS3
Линейный градиент это когда цвета представлены в виде прямой линии плавно и равномерно переходят один в другой.
Для создания линейного градиента при помощи CSS3 давайте создадим блок с классом «gradient-block»
|
1 2 |
<div class="gradient-block"> </div> |
Теперь при помощи CSS зададим для этого блока ширину, высоту и границу
|
1 2 3 4 5 |
.gradient-block{ border:1px solid red; width:300px; height:100px; } |
Далее для данного блока я задам ещё один класс и уже для него буду задавать разные градиенты. Вы можете задавать градиент для класса основного блока, так как большой роли это не играет.
В итоге код блока будет выглядеть так:
|
1 2 |
<div class="gradient-block gradient 1"> </div> |
Для задания простого линейного градиента нам понадобится свойство CSS3
|
1 |
background: linear-gradient(цвет1, цвет2); |
При этом на первом месте вы задаёте цвет, который будет находиться вверху, а на втором – цвет, который будет находиться внизу.
Цвета можно задавать как при помощи названий зарезервированных цветов, например:
|
1 |
background: linear-gradient(white, blue); |
Так и при помощи шестнадцатиричного кода, например:
|
1 |
background:linear-gradient(#A4D8F7, #1C4D95); |
То есть CSS код для задания градиента будет выглядеть так:
|
1 2 3 4 5 6 7 |
.gradient1{ background:linear-gradient(#A4D8F7, #1C4D95); background: -moz-linear-gradient(#A4D8F7, #1C4D95); background: -ms-linear-gradient(#A4D8F7, #1C4D95); background: -o-linear-gradient(#A4D8F7, #1C4D95); background: -webkit-linear-gradient(#A4D8F7, #1C4D95); } |
Вместо (#A4D8F7, #1C4D95) вы можете вписать свои цвета.
Также вы можете задавать три и более цветов для градиента.
Например так:
|
1 2 3 4 5 6 7 |
.gradient2{ background:linear-gradient(#A4D8F7, #1C4D95, #fff); background: -moz-linear-gradient(#A4D8F7, #1C4D95, #fff); background: -ms-linear-gradient(#A4D8F7, #1C4D95, #fff); background: -o-linear-gradient(#A4D8F7, #1C4D95, #fff); background: -webkit-linear-gradient(#A4D8F7, #1C4D95, #fff); } |
Также вы можете задавать в процентах соотношение цветов, если например вам нужно чтобы в градиенте из 3 цветов преобладал средний цвет, то можно написать так:
|
1 |
background: linear-gradient(#A4D8F7,#1C4D95 80%,#fff); |
Не забываем про кроссбрузерные префиксы! С ними код градиента будет выглядеть так:
|
1 2 3 4 5 6 7 |
.gradient3{ background: linear-gradient(#A4D8F7,#1C4D95 80%,#fff); background: -moz-linear-gradient(#A4D8F7,#1C4D95 80%,#fff); background: -ms-linear-gradient(#A4D8F7,#1C4D95 80%,#fff); background: -o-linear-gradient(#A4D8F7,#1C4D95 80%,#fff); background: -webkit-linear-gradient(#A4D8F7,#1C4D95 80%,#fff); } |
Интересно получается, не правда ли? Однако и это ещё не всё!
В градиенте CSS3 вы можете задавать не только цвета перехода, но и их направление.
Например:
Направление можно задать при помощи параметров :
- Top – цвета идут сверху вниз
- Left – слева на право
- Right – справа на лево
- Bottom – снизу вверх
Данные параметры определяют с какого направления будет начинаться переход. По умолчанию он идёт сверху вниз.
CSS код данного примера градиента будет выглядеть так:
|
1 2 3 4 5 6 7 |
.gradient4{ background: linear-gradient(left, #A4D8F7,#1C4D95,#fff); background: -webkit-linear-gradient(left, #A4D8F7,#1C4D95,#fff); background: -ms-linear-gradient(left, #A4D8F7,#1C4D95,#fff); background: -o-linear-gradient(left, #A4D8F7,#1C4D95,#fff); background: -moz-linear-gradient(left, #A4D8F7,#1C4D95,#fff); } |
Кроме направления для градиента CSS3 можно задать угол наклона.
Выглядеть это будет примерно так:
CSS код для градиента:
|
1 2 3 4 5 6 7 |
.gradient5{ background: linear-gradient(30deg, #fff, #A4D8F7,#1C4D95,#fff); background: -webkit-linear-gradient(30deg, #fff, #A4D8F7,#1C4D95,#fff); background: -ms-linear-gradient(30deg, #fff, #A4D8F7,#1C4D95,#fff); background: -o-linear-gradient(30deg, #fff, #A4D8F7,#1C4D95,#fff); background: -moz-linear-gradient(30deg, #fff, #A4D8F7,#1C4D95,#fff); } |
Здесь задан угол наклона 30 градусов. Вместо 30deg вы можете поставить своё значение.
Радиальный градиент CSS3
Помимо линейного градиента в CSS3 можно создавать и радиальные, в которых переход цветов формируется в виде окружности.
Для задания радиального градиента используется следующее CSS свойство:
|
1 |
background: radial-gradient(цвет1,цвет2); |
На первом месте будет стоять цвет, который находится ближе к центру.
Код CSS3 для данного градиента будет выглядеть так:
|
1 2 3 4 5 6 |
.gradient6{ background: radial-gradient(#ffffff,#2F73B6); background: -ms-radial-gradient(#ffffff, #2F73B6); background: -moz-radial-gradient(#ffffff, #2F73B6); background: -webkit-radial-gradient(#ffffff, #2F73B6); } |
Как видите даный CSS градиент растянуло в форме эллипса. Для того чтобы он был круглым нужно дописать ему параметр circle.
Тогда он примет следующий вид
CSS код градиента будет выглядеть так:
|
1 2 3 |
.gradient7{ background: radial-gradient(circle, #ffffff,#2F73B6); } |
Также для задания радиального градиента в CSS3 есть ещё ряд параметров:
- farthest-corner — при указании данного параметра градиент будет формироваться так что в боке будет отображаться его самый дальний угол.
Данный параметр я покажу в сочетании с параметром направления, который также можно использовать для радиального градиента.
На примере это будет выглядеть так:В CSS коде это выглядит так:
1background: radial-gradient(left, circle farthest-corner, #ffffff,#2F73B6); - closest-corner – отображает близжайший угол градиента
CSS код:
1background: radial-gradient(left, circle closest-corner , #ffffff,#2F73B6); - farthest-corner — отображает самый дальний угол градиента
1background: radial-gradient(left, circle farthest-corner, #ffffff,#2F73B6);
Поэкспериментировав с разными свойствами и цветами можно получить очень интересные градиенты. Здесь всё зависит от вашей фантазии :)
Правила при использовании градиентов
CSS3 градиенты значительно упрощают процесс вёрстки сайта и их конечно же стоит использовать. Но при этом нужно обязательно учитывать что данное свойство не поддерживается старыми версиями брузеров и некоторыми мобильными браузерерами, поэтому нужно соблюдать некоторые правила:
- 1.Всегда используйте кроссбраузерные префиксы
- 2.Используйте двойной фон. Один будет просто цветом (для старых браузеров), а второй уже градиентом. В итоге если у браузера не получится отобразить градиент, то он отобразит обычный фон и ваш блок не окажется бесцветным.
В CSS это будет выглядеть так:
|
1 2 3 4 |
.gradient1{ Background: #A4D8F7; background:linear-gradient(#A4D8F7, #1C4D95); } |
Вот, собственно говоря, и всё что касается использования градиентов для фонов. В одной из следующих статей я покажу как можно использовать градиент CSS3 для текста.
Если у вас возникли вопросы – пишите их в комментариях. Приятного вам градиентирования и до встречи в следующих статьях!
С уважением Юлия Гусарь
