Приветствую вас, дорогие читатели. Вот я тут думал, о чем сегодня написать, а потом вспомнил, что о линейном градиенте я уже на блоге писал, а о радиальном — еще нет. Значит, самое время это исправить, так как это одно из css3 свойств, о котором полезно знать. Итак, сегодня я расскажу, как создавать в css радиальный градиент.
Синтаксис свойства
Если вы уже знаете, как создается градиент линейный, то и этот вариант будет не очень сложным, потому что синтаксис практически тот же самый. В html я создам несколько блоков с двумя классами у каждого. Один будет общий и отвечать за основные свойства блоков, а второй — у каждого свой.
<div class = "radial radial1"></div> <div class = "radial radial2"></div> <div class = "radial radial3"></div>
Стилизуем в css все три блока одинаково, чтобы они имели один размер и располагались в линию. Это будет наша заготовка, на которой можно тренироваться прописывать градиенты.
.radial{
width: 200px;
height: 170px;
border: 1px solid #ccc;
display: inline-block;
}
Отлично для создания градиента используется следующий синтаксис:
background: radial-gradient(параметры через запятую);
Обязательный параметр — цвет. Необязательные: тип и колорстоп, то есть указание, где каждый цвет должен быть максимально насыщенным. Давайте зададим градиент первому блоку:
.radial1{
background: radial-gradient(#143D2C, #172A0E);
}
Если присмотреться, то видно, что по бокам цвет темнее, а в центре — светлее. Как видите, достаточно указать только цвет, чтобы все работало. Вы можете указать сколько угодно цветов.
Например, если добавить через запятую такие цвета: #071306, #050F0B, то блок будет выглядеть так:
Тип градиента
Отлично, с цветом, я думаю, мы разобрались. Также отмечу, что указывать цвет вы имеете полное право в любом формате (rgb, rgba, hex, hsl). Также есть параметр, который позволяет определить тип градиента: круговой или эллиптический? По умолчанию всегда используется второй вариант. Давайте для второго блока укажем круговой, а также увеличим ширину, чтобы было лучше видно отличия:
.radial2{
background: radial-gradient(circle, #C0CD6A, #172A0E, #071306);
width: 400px;
}
Р — разница)
Колорстопы
Последний третий параметр записывается после цвета, если он необходим. По умолчанию браузер сам распределяет цвета, но с помощью колорстопов вы можете делать это вручную. Например:
.radial3{
background: radial-gradient(#14263D 25%, #1C4254 78%, #0E0E2A 93%);
}
И вот такая штука у нас получается:
Самая насыщенная часть первого цвета будет на 25% от центра блока, наибольшая насыщенность двух других цветов сдвинута почти в самый конец, поэтому в середине цвет мягче.
Резкие переходы
Самое последнее, что мне стоит вам показать, это резкие переходы между цветами с помощью колорстопов. Сначала я покажу пример кода и результат, а потом объясню суть приема. Я думаю, так проще.
Радужный дартс с помощью резких переходов
Вот так выглядит код:
.radial3{
background: radial-gradient(red 13%, orange 13%, orange 26%, yellow 26%, yellow 39%,
green 39%, green 52%, aqua 52%, aqua 65%, blue 65%, blue 82%, purple 82%, purple 100%);
}
И вот что он формирует:
Ну а суть приема в том, что нужно для первого цвета задать колостоп такой же, как и для соседнего, потом следующий цвет пишется опять и с ним ставится колорстоп в том месте, где он должен закончиться. Следующие цвета прописываются по аналогии. Если вы не поняли, посмотрите еще раз внимательно сам код. Я думаю, вы очень быстро поймете суть, а там уже и самому будет очень просто все это реализовать.
Преимущества градиентов и как их создавать быстро
Ну а к преимуществам я бы отнес то, что теперь в веб-дизайне с помощью css можно реализовать то, что ранее было возможно только с помощью вставки картинок. Конечно, если вы хотите создавать красивые градиенты быстро, красиво и просто, то немалую роль тут играет правильный подбор цветов.
Ну а чтобы ускорить процесс, да заодно и сделать свою верстку кроссбраузерной, рекомендую вам использовать классный генератор, о котором я написал в этой статье.
Итак, на этом у меня точно все. Рассказал все, что знал сам, ну а если вы можете как-то дополнить или задать вопросы, без проблем, жду ваших комментариев.
Очень интересно, Михаил! Ваш материал первый в своем роде о радиальном градиенте, который так доступно и понятно разъяснен. Спасибо, теперь буду применять и пользоваться у себя!!!