Vahid Goudini

Business Development

Software Developer

Data Scientist

Project Manager

Blog Post

طراحی آیکون باکس زیبا در المنتور

01 October 2021 ولاگ

برای مشاهده ویدیوهای جدید در کانال YouTube من عضو شوید

جهت خرید فایل آماده روی لینک کلیک نمایید

20,000 تومان

آموزش طراحی هاور آیکون باکس در المنتور

بخش الگوی جدید را در صفحه ساز elmenetor ایجاد کنید و قسمت ارتفاع را ویرایش کنید ، سپس قسمت داخلی را ایجاد کرده و کد زیر را طبق ویدیو کپی کنید

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