Фигуры с hover-эффектом из сериала «Игра в кальмара»
Подготовим три пустых карточки. В дальнейшем в каждую карточку мы вставим по одной фигуре — круг, квадрат и треугольник. А пока подготовим hover-эффект. При наведении мыши на карточку, область карточки закрашивается черным цветом в мелкую сеточку.
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;
}
.container{
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ширину экрана*/
height: 99.9vh;/*на всю высоту экрана*/
display: flex;/*flexbox сетка*/
}
.container .card {
position: relative;
display: flex;
flex-grow: 1;/*свободное пространство в контейнере*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
height: 100%;
transition: 0.5s ease-in-out;/*плавность для hovre-эффекта*/
overflow: hidden;/*скрыт выходящее за рамки*/
}
.container .card:hover {
background: #1a1a1a;/*цвет карточки при наведении*/
background-size: 20px 20px;
flex-grow: 3;
}
.container::before{
content: '';
position: absolute;/*абсолютное позиционирование*/
top: 0;/*позиция сверху*/
left: 0;/*позиция слева*/
width: 100%;
height: 100%;
background: repeating-linear-gradient(0deg, #fff1 0px, #fff1 1px, transparent 1px,transparent 10px),
repeating-linear-gradient(90deg, #fff1 0px, #fff1 1px, transparent 1px,transparent 10px);
background-size: 10px 10px;/*размер клеточки*/
z-index: 1000;/*на верхнем слое*/
pointer-events: none;
}
Воспользуемся бесплатной библиотекой иконок Ionicons, найдем нужные нам фигуры и вставим код с иконками между тегами div. А перед закрывающим тегом body вставьте две ссылки на JavaScript файлы данного модуля.
<div class="container">
<div class="card"><ion-icon name="ellipse-outline"></ion-icon></div>
<div class="card"><ion-icon name="triangle-outline"></ion-icon></div>
<div class="card"><ion-icon name="square-outline"></ion-icon></div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
На странице появились три заветных фигуры.
Эти три загадочные фигуры представляют из себя иконочный шрифты. Отсюда следует, что к ним можно применять свойства, как для шрифтов — устанавливать цвет, размер. Фильтр drop-shadow создаст большую мягкую тень вокруг фигур. Фильтр drop-shadow учитывает добавление таких псевдо-элементов, как :before и :after. Поэтому мы здесь используем именно этот фильтр, а не свойство box-shadow.
.container .card ion-icon{
font-size: 15vw;/*размер иконки*/
transition: 0.5s ease-in-out;
color: #1a1a1a;/*цвет иконки*/
}
.container .card:hover ion-icon{
font-size: 25vw;
color: #fff;
filter:drop-shadow(0 0 10px #ea4884)
drop-shadow(0 0 30px #ea4884)
drop-shadow(0 0 60px #ea4884)
drop-shadow(0 0 100px #ea4884)
drop-shadow(0 0 150px #ea4884);
}
