<div class="radikalwp-hv-tilt"><div class="radikalwp-hv-tilt-in" style="background:linear-gradient(135deg,#8b5cf6,#d946ef)"><span>پکیج طلایی<//span><//div><//div>
.radikalwp-hv-tilt { perspective: 700px; width: 230px; }
.radikalwp-hv-tilt-in {
height: 140px;
border-radius: 18px;
display: flex;
align-items: flex-end;
padding: 16px;
color: #fff;
font-weight: 800;
font-size: 15px;
box-shadow: 0 12px 30px rgba(139, 92, 246, .3);
transition: transform .4s ease, box-shadow .4s ease;
}
.radikalwp-hv-tilt:hover .radikalwp-hv-tilt-in {
transform: rotateY(-14deg) rotateX(7deg) translateY(-4px);
box-shadow: -18px 22px 44px rgba(139, 92, 246, .45);
}
درباره این اسنیپت
کارت با perspective کمی به سمت موس میچرخد و سایهاش جابهجا میشود؛ حس فیزیکی واقعی میدهد. برای کارتهای محصول ویترین فروشگاه مدرن. این هاور برای تصاویر گالری، نمونهکار و کارتهای بلاگ طراحی شده و بازخورد لمسی قوی میدهد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۱۶ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
هدستفون حرفهای
۲,۹۸۰,۰۰۰ تومان
هاور چرخش ملایم سهبعدی
پکیج ابزارهای حرفهای
مجموعه کامل افزونهها و اسنیپتهای آماده برای راهاندازی سریع سایت.
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!