Аватар внутри круга на CSS
Сегодня мы сделаем эффектный аватар внутри круга, используя псевдоэлементы before и after.
<div class="box">
<div class="circle">
<img src="img1.png">
</div>
<img src="img1.png">
</div>
По дефолту наш аватар прибит к верхнему левому углу окна браузера.
Нас это не устраивает, переместим аватар в центр экрана, создав для него флексовый (гибкий) контейнер. Мы не будем создавать лишний div, а сделаем этим гибким контейнером тег body.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Создадим блок с фоном для аватара.
.box {
position: relative;
width: 240px;
height: 326px;
background: rgb(194, 127, 127);
overflow: hidden;
}
С помощью псевдоэлемента before закруглим нижнюю часть цветного блока.
.box::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
background: transparent;
border-radius: 50%;
z-index: 1;
box-shadow: 0 100px 0 40px #fff;
}
Псевдоэлемент after нарисует нижнюю рамку.
.box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
box-sizing: border-box;
border-radius: 50%;
border: 6px solid transparent;
border-bottom: 6px solid rgba(235, 221, 159, 0.877);
}
Создадим фигуру круга с аватаром внутри.
.box .circle {
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
background: rgb(146, 19, 146);
overflow: hidden;
border-radius: 50%;
border: 6px solid rgba(235, 221, 159, 0.877);
}
.box .circle img,
.box img {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 450px;
}
Поменяем цвет с темно-красного на цвет фона страницы - белый, чтобы скрыть верхнюю часть.
.box {
background: rgb(255, 255, 255);
}
-
Создано 30.06.2021 10:14:44
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.