icon box Skewed effect
01 October 2021
Subscribe To My YouTube Channel For More Upcoming Videos
how add Icon Box Skewed Effect
creat new template section in elmenetor page builder and edit height section then make inner section and copy below code According to the video
Skewed Effect CSS
/* Effect CSS */
:root{
--grad1: #00ccff;
--grad2: #0e1538;
--grad3: #d400d4;
}
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;
}
Skewed Blur Effect CSS
/* BLUR EFFECT */
selector::after{
-webkit-filter: blur(50px);
filter: blur(50px);
}
Skewed Hover Effect CSS
/* 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));
}