Сегодня я научу вас созданию очень яркого эффекта. Этот эффект особенно хорошо выглядит на темном фоне. Для этого вам понадобиться десять минут вашего времени и код приведенный ниже.
Записавшись на мой курс по созданию сайтов, Вы сможете разрабатывать действительно удивительные сайты.
Проиграть видео
CSS
Для эффекта
:root{
--grad1: #9400d3;
--grad2: #0e1538;
--grad3: #00ccff;
}
selector{
position: relative;
z-index: 999;
}
/*SKEWED EFFECT*/
selector::before, selector::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
-webkit-transform: skewX(2deg) skewY(4deg);
transform: skewX(2deg) skewY(4deg);
background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
z-index: -9;
}
CSS
Для эффекта при наведение
/*BLUR EFFECT*/
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
} /*HOVER EFFECT*/
selector:hover::before, selector:hover::after{
background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
}
Также вы можете заказать у меня интернет магазин. По всем вопросам пишите в whatsapp
