Бешеный конкурс!
3:29
Автор: Рубрика: CSS-рецепты 2 комментария

Как создавать в css3 радиальный градиент?

Приветствую вас, дорогие читатели. Вот я тут думал, о чем сегодня написать, а потом вспомнил, что о линейном градиенте я уже на блоге писал, а о радиальном — еще нет. Значит, самое время это исправить, так как это одно из 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;
}

круг
эллипс
Р — разница)

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Колорстопы

Последний третий параметр записывается после цвета, если он необходим. По умолчанию браузер сам распределяет цвета, но с помощью колорстопов вы можете делать это вручную. Например:

.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 можно реализовать то, что ранее было возможно только с помощью вставки картинок. Конечно, если вы хотите создавать красивые градиенты быстро, красиво и просто, то немалую роль тут играет правильный подбор цветов.

Ну а чтобы ускорить процесс, да заодно и сделать свою верстку кроссбраузерной, рекомендую вам использовать классный генератор, о котором я написал в этой статье.

Итак, на этом у меня точно все. Рассказал все, что знал сам, ну а если вы можете как-то дополнить или задать вопросы, без проблем, жду ваших комментариев.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

2 комментария
  • Валерий

    Очень интересно, Михаил! Ваш материал первый в своем роде о радиальном градиенте, который так доступно и понятно разъяснен. Спасибо, теперь буду применять и пользоваться у себя!!!

    2016-04-10 в 7:57 | Ответить
    • Михаил

      Спасибо, что оцениваете качество моей статьи как хорошее.

      2016-04-10 в 3:29 | Ответить