Когда-нибудь мечтали создать иконку увеличительного стекла, используя только CSS, а не скучные svg? Может быть, и нет. Но давайте попробуем это сделать!
Создание окружности
Для начала создадим окружность:
.magnifying-glass {
position: relative;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: aliceblue;
border: 15px solid slategray;
border-radius: 50%;
}Добавление ручки
Теперь добавим и правильно разместим ручку для нашей лупы:
.magnifying-glass:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 15px;
background-color: slategray;
border-radius: 0 7.5px 7.5px 0;
transform-origin: 0 50%;
transform: translateX(100%) rotate(45deg);
}Теперь у нас есть полная иконка увеличительного стекла, созданная исключительно с помощью CSS.
Почему не SVG?
Создание фигур с помощью CSS может быть сложнее, чем использование готовых изображений в формате SVG. Однако CSS-фигуры предоставляют гораздо больше возможностей для интерактивности. Например, можно создавать интересные hover-эффекты.
Обёртка для удобства
Для упрощения работы с CSS-фигурой можно добавить обёртку:
<div class="heart-wrapper">
<div class="heart"></div>
</div>Пример: Масштабирование сердца при наведении курсора
Для тех, кто читал наши предыдущие статьи, вот небольшой пример: масштабирование сердца при наведении курсора.
.heart {
position: relative;
width: 200px;
height: 160px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
width: 100px;
height: 160px;
left: 100px;
background-color: tomato;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform-origin: 100% 100%;
transform: rotate(45deg);
}
.heart-wrapper {
cursor: pointer;
width: 200px;
height: 160px;
transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.heart-wrapper:hover {
transform-origin: 50% 50%;
transform: scale(1.3);
}Этот код создает интерактивное сердце, которое увеличивается при наведении курсора.
Заключение
CSS-фигуры могут показаться сложными в реализации, но они открывают огромные возможности для создания интерактивных элементов на веб-страницах. Экспериментируйте с CSS, чтобы создавать уникальные и динамичные иконки и фигуры.
