Чем это хорошо самостоятельно рисовать иконки на чистом CSS , когда можно за считанные минуты найти любую иконку на иконочных сервисах и вставить на сайт? А почему бы и нет, если иконка представляет собой простую фигуру. Нарисовать её не так сложно, зато вы избавляете страницу вашего сайта делать лишний HTTP запрос...
Чем это хорошо самостоятельно рисовать иконки на чистом CSS, когда можно за считанные минуты найти любую иконку на иконочных сервисах и вставить на сайт? А почему бы и нет, если иконка представляет собой простую фигуру. Нарисовать её не так сложно, зато вы избавляете страницу вашего сайта делать лишний HTTP запрос к сторонней библиотеке. А выполнение любого запроса увеличивает время загрузки сайта.
На этом уроке мы нарисуем иконку пользователя на чистом CSS.
Посмотрите демо на CodePen
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%);
}
