پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<div class="radikalwp-fun-card"><div class="radikalwp-fun-card-emoji">🎧<//div><h4>هدفون بی‌سیم پرو<//h4><span class="radikalwp-fun-card-price">۱٬۲۹۰٬۰۰۰ تومان<//span><button type="button" class="radikalwp-fun-card-btn">افزودن به سبد<//button><//div>
.radikalwp-fun-card {
  width: 240px;
  padding: 22px 18px 18px;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.radikalwp-fun-card:hover {
  transform: perspective(700px) rotateX(6deg) rotateY(-6deg) translateY(-4px);
  box-shadow: -14px 18px 30px rgba(15, 23, 42, .14);
}
.radikalwp-fun-card-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 14px;
  font-size: 40px;
  background: linear-gradient(135deg, #ede9fe, #fce7f3);
  border-radius: 22px;
}
.radikalwp-fun-card h4 { margin: 0 0 6px; font-size: 15px; color: #0f172a; }
.radikalwp-fun-card-price {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  color: #7c3aed;
}
.radikalwp-fun-card-btn {
  width: 100%;
  padding: 10px 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: filter .2s ease;
}
.radikalwp-fun-card-btn:hover { filter: brightness(1.1); }

درباره این اسنیپت

کارت محصول با ایموجی درشت روی سکوی گرادیانی که در هاور با پرسپکتیو کمی می‌چرخد و سایه‌اش دوردار می‌شود. حال‌وهوای بازیگوش و رنگی آن برای فروشگاه‌های لوازم جانبی و محصولات جوان‌پسند ساخته شده است. قیمت با رقم فارسی درشت نمایش داده می‌شود و دکمه افزودن به سبد در پایین قرار دارد. چرخش سه‌بعدی فقط با transform ساخته شده و هیچ جاوااسکریپتی لازم ندارد.

پرسش‌های متداول

بله؛ باکس ایموجی را با تگ img یا پس‌زمینه تصویر جایگزین کنید و گوشه‌های گرد آن را حفظ کنید. بقیه افکت بدون تغییر کار می‌کند.

در hover مقادیر rotateX و rotateY را کوچک‌تر کنید. مثلاً 3 درجه برای حس ملایم‌تر کافی است.

خیر؛ دکمه فقط نمایشی است. می‌توانید آدرس یا اکشن فروشگاه خود را به آن متصل کنید و استایل ثابت بماند.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

🎧

هدفون بی‌سیم استودیویی

صدای خالص، باتری ۳۰ ساعته و طراحی ارگونومیک برای کار روزمره.

۲,۴۵۰,۰۰۰ تومان
پیش‌نمایش زنده اسنیپت

کارت محصول با نوار قیمت

کارت محصول فروشگاه
۶۰
۴.۱ (۹)
نوفا

هدفون بی‌سیم پرو

۱٬۲۹۰٬۰۰۰★ ۴.۸
پیش‌نمایش زنده اسنیپت

کارت محصول با گرادیان تصویر

کارت محصول فروشگاه
۴۷
۴.۲ (۷)
🖼️

هدفون بی‌سیم Pro

کیفیت صدا استودیویی با نویز کنسلینگ فعال

پیش‌نمایش زنده اسنیپت

کارت محصول با هاور

کارت فروشگاه هاور
۶۰
۴.۴ (۹)