Рисуем иконку пользователя на CSS
Чем это хорошо самостоятельно рисовать иконки на чистом CSS, когда можно за считанные минуты найти любую иконку на иконочных сервисах и вставить на сайт? А почему бы и нет, если иконка представляет собой простую фигуру. Нарисовать её не так сложно, зато вы избавляете страницу вашего сайта делать лишний HTTP запрос к сторонней библиотеке. А выполнение любого запроса увеличивает время загрузки сайта.
На этом уроке мы нарисуем иконку пользователя на чистом CSS.
HTML разметка
Блок обертка wrapper выравнивает иконку по центру страницы. Блок с классом user отвечает за разметку самой иконки.
<div class="wrapper">
<div class="user"></div>
</div>
CSS стили
Стандартный набор CSS стилей для flex-контейнера wrapper, если нужно flex-элемент user разместить по центру.
.wrapper {
display: flex;
justify-content: center; // выравнивает по основной оси
align-items: center; // выравнивает по поперечной оси
min-height: 100vh; // на всю высоту экрана
}
Круглая заготовка для иконки
Нарисуем круг с толстой красной рамкой для иконки юзера. В дальнейшем эта рамка будет ограничивать само изображение юзера так, чтобы оно не прилипало в краям. Внутри заготовки будут находится два псевдоэлемента, позиционированные относительно круглой заготовки user. Поэтому элементу user следует задать свойство position со значением relative.
.user {
width: 200px; // размер иконки по ширине
height: 200px; // размер иконки по высоте
border: 24px solid red; // толщина и цвет рамки
border-radius: 50%; // скругление рамки
position: relative; // родитель, относительно которого позиционированы псевдоэлементы
overflow: hidden; // скрывает дочерние элементы, выходящие за рамки контейнера
}
Заполним красным цветом и середину круга.
background-color: red; // цвет фона круга
Голова фигуры юзера
Рисуем голову юзера при помощи псевдоэлемента before.
.user::before {
content : ''; // обязательное свойство для before
display: block;
width: 75px; // ширина головы иконки
height: 75px; // высота головы иконки
background: #fff; // цвет
border-radius: 50%; // скругление
position: absolute; // абсолютное позиционирование
left: 50%; // сдвиг от левого края родителя
top: 5px; // сдвиг вниз от верхнего края родителя
}
Голова юзера отодвинулась от левого края на 50%, но поскольку у него есть своя собственная ширина, то он располагается не совсем по центру.
Для выравнивания элемента точно по центру, часто используют свойство transform и сдвигают элемент по оси X на -50% (влево), относительно его собственной ширины.
transform: translateX(-50%);
Туловище фигуры юзера
При помощи псевдоэлемента after, нарисуем туловище юзера аналогичным способом.
.user::after {
content : '';
display: block;
width: 150px;
height: 150px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: -40px;
transform: translateX(-50%);
}
-
Создано 04.05.2020 10:38:10
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.