Создаем радиальный градиент на CSS

Градиентный фон на CSS — не магия, а большое подспорье верстальщикам! Ведь благодаря появлению CSS свойств для создания линейного и радиального градиентов, у верстальщиков отпала необходимость возиться с .png или .gif файлами. В этой статье мы немного развлечемся и наколдуем несколько радиальных градиентов. Но для начала ознакомимся с досье на CSS функцию, которая поможет нам осуществить задуманное:

Функция CSS radial-gradient() способна сотворить радиальный градиент, если использовать ее в качестве значения свойства background. Примерно так: background: radial-gradient(здесь будут параметры). Количество указываемых параметров зависит от вида градиента. Ниже разберем этот момент подробнее.

Основные параметры функции radial-gradient()

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

Примеры радиальных центрированных градиентов:

background: radial-gradient(white, #87deff);

В этом примере всего два цвета:
белый — white и голубой — #87deff

Для создания градиента с большим количеством цветов, например с 3 цветами, просто перечислим эти цвета через запятую:

background: radial-gradient(#fdf4b4, white, #87deff);

В этом примере 3 цвета:
желтый — #fdf4b4, белый — white и голубой — #87deff

Потренируемся!

Удостоим ценную бумагу возможностью попозировать на бело-голубом фоне:

Ценная бумага — 2020

РАЗВЕРНУТЬ КОД БЛОКА С ЦЕННОЙ БУМАГОЙ

1.HTML-код:

!DOCTYPE html>
<html>
<head>
   <title>Радиальный градиент</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="cenbum.css" type="text/css">
</head>
<body>
   <div class="radial-block-tb">
   	   <div class="img-tb"></div>
   	   <div class='text-tb'>Ценная бумага - 2020</div>
   </div>
</body>
</html>

2. Так как в html-файле мы подключали css-файл по имени «cenbum.css», создадим этот файл и начиним его свойствами:

.radial-block-tb {
	height: 400px;
	width:400px;
	float:left;
	background: radial-gradient(white, #87deff);
}
.img-tb {
    background: url('https://mle5hclvtye4.i.optimole.com/rlPBwbs.skWA~63450/w:auto/h:auto/q:90/https://webtort.ru/wp-content/uploads/2020/04/tb.png') center 20px no-repeat;
    height: 80%;
    width: 100%;
}
.text-tb {
	font-family: 'Roboto Condensed';
    text-align: center;
    font-size: 28px;
    color: #076289;
    text-transform: uppercase;
}

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

Дополнительные параметры функции radial-gradient()

1. Позиционирование центра градиента. Может задаваться словами: top, bottom, center, left, right; процентами или числовыми значениями (в px, em, например). Позиционирование задается перед списком цветов и предваряется предлогом «at». Посмотрим на примерах:

Например, позиционируем желто-бело-голубой градиент так, чтобы желтый центр располагался вверху слева:

background: radial-gradient(at left top, #fdf4b4, white, #87deff);

А теперь расположим чуть правее на 15% и ниже на 100px:

background: radial-gradient(at 15% 100px, #fdf4b4, white, #87deff);

2. Размер градиента. С помощью этого параметра можно определить, как далеко будет распространяться эффект перехода цветов. Выбирайте:

closest-side — если планируете сохранить эффект до ближайшей стороны
farthest-side — когда желаете расширить градиент до дальней стороны
closest-corner — если ориентируетесь на углы и хотите сохранить эффект до ближайшего угла
farthest-corner — используется по умолчанию, расширяет градиент до дальних углов

Располагать параметр размера градиента следует перед параметром позиционирования.

Давайте немного потренируемся: увеличим ширину блока из примера с солнышком и будем менять радиус освещенности благодаря изменения размера градиента.

Вот наше солнышко освещает расширенный блок. Градиент достигает дальней стороны:

background: radial-gradient(farthest-side at 15% 100px, #fdf4b4, white, #87deff);

А это градиент с расстоянием по умолчанию — до дальнего угла:

background: radial-gradient(farthest-corner at 15% 100px, #fdf4b4, white, #87deff);

3. Форма градиента по умолчанию — эллиптическая, т. е. содержит значение ellipse. Чтобы изменить форму на круглую, нужно записать значение circle. Кстати, параметр формы, записывается первым в списке параметров градиента. Давайте создадим желтый

Так выглядит круглый градиент, смещенный влево:

background: radial-gradient(closest-side at 30% center, #fcf6ec,#f2ddb4);

А напоследок потренируемся!

Создадим фоновое изображение для мастера Йодо так, чтобы мастер оказался в светлом круглом ареоле, а текст, расположенный справа от него, был на однородном фоне:

Я — великий Магистр Йода!

..или ЗЕЛЁНКИ?..

РАЗВЕРНУТЬ КОД БЛОКА С ЙОДО

1.HTML-код:

<!DOCTYPE html>
<html>
<head>
   <title>Радиальный градиент</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="yodo.css" type="text/css">
</head>
<body>
   <div class="radial-block-yodo">
   	   <div class="img-yodo"></div>
   	   <div class='text-yodo'><p class='text1'>Я - великий Магистр Йода!</p><p class='text2'> ..или ЗЕЛЁНКИ?.. </p></div>
   </div>
</body>
</html>

CSS — файл:

.radial-block-yodo {
	height: 300px;
    width:100%;
	max-width:800px;
	float:left;
	background: radial-gradient(closest-side at 20% center, #fcf6ec,#f2ddb4);
}
.img-yodo {
    background: url('https://mle5hclvtye4.i.optimole.com/rlPBwbs.skWA~63450/w:auto/h:auto/q:90/https://webtort.ru/wp-content/uploads/2020/04/yodo.png') 5% 20px no-repeat;
    height: 100%;
    width: 45%;
    float:left;
}
.text-yodo {
	font-family: 'Roboto Condensed';
    float: right;
    font-size: 28px;
    color: #4a3a2e;
    width: 54%;
    margin-top: 7%;
    line-height: 40px;
}
.text1{
    font-size: 28px; 
    text-transform: uppercase;
}
.text2{
    font-size: 25px;
}

На этом закончим изучение радиального градиента на CSS и пойдем нальем себе чайку — устроим небольшой перерыв. Но только для того, чтобы позже продолжить знакомство с интересными приемами в веб-строительстве! И да пребудет с Вами Сила!

IT - десерты по лучшим рецептам!

Создаем радиальный градиент на CSS