Создаем радиальный градиент на 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
Потренируемся!
Удостоим ценную бумагу возможностью попозировать на бело-голубом фоне:
РАЗВЕРНУТЬ КОД БЛОКА С ЦЕННОЙ БУМАГОЙ
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://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);
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://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 и пойдем нальем себе чайку – устроим небольшой перерыв. Но только для того, чтобы позже продолжить знакомство с интересными приемами в веб-строительстве! И да пребудет с Вами Сила!