Фигуры с hover-эффектом из сериала «Игра в кальмара»

Фигуры с hover-эффектом из сериала «Игра в кальмара»

Фигуры с 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;
}

Фигуры с hover-эффектом из сериала "Игра в кальмара"

Воспользуемся бесплатной библиотекой иконок 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>

Фигуры с hover-эффектом из сериала "Игра в кальмара"

На странице появились три заветных фигуры.

Фигуры с hover-эффектом из сериала "Игра в кальмара"

Эти три загадочные фигуры представляют из себя иконочный шрифты. Отсюда следует, что к ним можно применять свойства, как для шрифтов — устанавливать цвет, размер. Фильтр 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);
}

Фигуры с hover-эффектом из сериала "Игра в кальмара"

Источник