طراحی آیکون باکس زیبا در المنتور
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));
}