Многослойный круг на градиентах и тенях
Как сделать фигуру круга многослойной, размытой и загадочной, используя только HTML и CSS? Вы узнаете из этого урока.
HTML разметка
Создадим фигуру круга circle и внутри пропишем вспомогательный теги i и j, с помощью которых можно создавать эффект многослойности.
<section>
<div class="circle">
<i></i>
<i></i>
<i></i>
<i></i>
<j></j>
<h2>How to Make<br><span>Gradient</span><br>Circle</h2>
</div>
</section>
CSS код
Сделаем секцию flex-контейнером с градиентным фоном.
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*размер бокса без учета рамок*/
font-family: 'Poppins', sans-serif;/*название шрифта*/
}
section{
display: flex;/*флексовый контейнер*/
justify-content: center;/*выравнивание по горизонтали*/
align-items: center;/*выравнивание по вертикали*/
min-height: 100vh;/*на всю видимую высоту экрана*/
background: linear-gradient(90deg,#49aeff,#ff4c89);/*фон секции*/
}
Нарисуем градиентный круг.
.circle{
position: relative;/*относительное позиционирование*/
width: 500px;/*ширина круга*/
height: 500px;/*высота круга*/
background: linear-gradient(90deg,#49aeff,#ff4c89);/*градиентный фон*/
border-radius: 50%;/*закругление углов бокса*/
display: flex;
justify-content: center;
align-items: center;
}
Размоем у круга первые три слоя i, ведь нам не нужны четкие линии.
.circle i {
position: absolute;/*абсолютное позиционирование*/
background: linear-gradient(90deg,#49aeff,#ff4c89);
z-index: 2;/*на слой выше*/
inset: -5px;/*устанавливает границу*/
filter: blur(50px);/*степень размытия*/
border-radius: 50%;
}
Четвертый слой закрасим в белый цвет, обратившись непосредственно к четвертому тегу i в HTML-разметке.
.circle i:nth-child(4){
background: #fff;
z-index: 3;/*третий слой*/
inset: 5px;
}
Через последний слой круга тег j, сформируем окончательный вид нашего круга.
.circle j {
position: absolute;
inset: -5px;
z-index: 2;
border-radius: 50%;
box-shadow: 20px 20px 50px rgba(0,0,0,0.25),
inset 20px 20px 50px rgba(0,0,0,0.15);/*тень*/
}
И последнее, стилизуем текст внутри круга.
.circle h2{
position: relative;
z-index: 20;/*на верхнем слое*/
text-align: center;/*текст посередине*/
font-size: 2em;/*размер шрифта*/
font-weight: 300;/*толщина шрифта*/
text-transform: uppercase;/*заглавные буквы*/
letter-spacing: 10px;/*межбуквенное пространство*/
line-height: 1.1em;/*межстрочное пространство*/
color: #646464;/*цвет заголовка*/
}
.circle h2 span{
font-weight: 700;
font-size: 2em;
line-height: 1em;
letter-spacing: 0;
}
-
Создано 08.12.2021 10:54:28
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.