آموزش طراحی افکت قطره آب در المنتور با Css
آخرین بروزرسانی:
المنتور یک راه موثر برای یادگیری طراحی وب است. این افزونه قدرتمند و قابلیت های فراوانی دارد که به طراحان وب کمک می کند تا صفحات وب زیبا و حرفه ای ایجاد کنند. شما با افزونه المنتور و چاشنی Css می توانید به راحتی و بدون نیاز به تخصص خاصی ، طرح های وب زیبا و پیچیده را طراحی کنید. این افزونه دارای خصوصیات ویژه ای است که به طراحان وب اجازه می دهد با استفاده از المنت های بصری، صفحات وب را در زمان کمی بسازند و سبک های مختلفی را پیاده سازی کنند.
با توجه به مزایای استفاده از المنتور، آموزش آن برای همه کسانی که علاقه مند به طراحی وب بسیار مفید است. با آموزش المنتور می توانید طرح های وب خود را به راحتی درست کنید و به طور مستمر بروز رسانی کنید. همچنین شما می توانید با مشاهده آموزش های سایت المنتور ، بهترین نتیجه را از طراحی صفحات وب خود به دست آورید.
در این پست قصد داریم آموزش طراحی افکت قطره آب برای استفاده در قسمت های مختلف سایت المنتوری را آموزش دهیم
دمو افکت طراحی شده
1402
برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
سورس Css استفاده شده
Elementor.ir
selector{
--card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
--card-hover-shape: 50%;
--heading-shape: 50%;
--heading-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
--heading-background: #eff0f4;
--heading-circle-size: 80px;
--bubble-color: #ffffff;
}
selector{
box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
transition: 0.5s ease-in-out;
border-radius: var(--card-shape);
}
selector:hover{
border-radius: var(--card-hover-shape);
}
selector::before{
content: '';
position: absolute;
top: 50px;
left: 85px;
width: 35px;
height: 35px;
background: var(--bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector::after{
content: '';
position: absolute;
top: 90px;
left: 110px;
width: 15px;
height: 15px;
background: var(--bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector h2{
position: relative;
width: var(--heading-circle-size);
height: var(--heading-circle-size);
background: var(--heading-background);
border-radius: var(--heading-shape);
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-in-out;
box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
selector:hover h2{
border-radius: var(--heading-hover-shape);
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام