Vahid Goudini

Business Development

Software Developer

Data Scientist

Project Manager

Blog Post

icon box Skewed effect

01 October 2021 Toturial
icon box Skewed effect

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));
}
				
			
Tags:
Write a comment