سلام دوستان در این آموزش امروز قرار با همدیگه یک هاور باکس با افکت سه بعدی طراحی کنیم. برای استفاده از این آموزش شما به المنتور پرو احتیاج دارید. کد های CSS را برای شما قرار دادیم تا نیازی به کد نویسی نداشته باشید. ابعاد استفاده شده در این آموزش می تواند بسته به نیاز شما تغییر کنند.ابعادی که در آموزش استفاده شده است صرفا جهت نمایش بهتر این باکس انتخاب شده ، شما می توانید استایل های استفاده شده در آموزش را نسبت به طرح خود شخصی سازی نمایید .
هاور باکس با افکت سه بعدی :
از این مدل هاور باکس برای جذابیت بخشیدن به سایت های خود میتوان استفاده کرد. ما در این آموزش از المنتور پرو استفاده کرده ایم و کد های CSS خود را در بخش CSS سفارشی قرار دادیم شما هم برای سهولت کار بهتر است از نسخه المنتور پرو استفاده نمایید .
المنتور پرو:
این صفحه ساز یکی از محبوب ترین صفحه سازی های وردپرس می باشد. شما می توانید به راحتی افزونه المنتور پرو از مارکت های ایرانی خریداری نمایید.
همچنین برای دریافت تازه ترین آموزش های ما در شبکه های مجازی می توانید ما را در صفحه اینستاگرام دنبال کنید . همچنین از طریق صفحه تماس با ما با مشاورین ما در امر طراحی وب سایت برای کسب و کار خود به صورت رایگان مشاوره بگیرید.
کد های CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
selector{ transition: 0.5s; } selector:hover{ transform: rotate(3deg) skew(-3deg); } selector .elementor-widget-image{ padding-left: 0 !important; padding-right: 0 !important; transition: 0.5s; } selector .elementor-widget-image:nth-child(2){ opacity: 0.8; z-index: -1; } selector:hover .elementor-widget-image:nth-child(2){ transform: translate(15px, 15px); } selector .elementor-widget-image:nth-child(3){ opacity: 0.4; z-index: -2; } selector:hover .elementor-widget-image:nth-child(3){ transform: translate(30px, 30px); } |