Многослойный круг на градиентах и тенях

Многослойный круг на градиентах и тенях

Как сделать фигуру круга многослойной, размытой и загадочной, используя только 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;
}

Многослойный круг на градиентах и тенях

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button