طراحی بنر استوری

E-commerce Web Design
Ui Design
©️2025 Mahdev Web Design Service | All Rights Reserved

Work Work Work💻

Bymer business✌️

آموزش: محدود کردن متن به ۲ خط با CSS 💥

جلوگیری از بلند شدن عنوان محصولات و حفظ نظم گرید با محدود کردن متن به دو خط.

این کد css رو به متنی که میخای بده ✅

{ 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

گفت نمردیم و چه چیزها که دیدیم
گفتم ای کاش مرده بودیم و نمیدیدیم.

انیمیشن هاور اسکرول، مناسب برای پرزنت نمونه کار و ریسپانسیو روی موبایل و دسکتاپ👇👨‍💻
نکته: کد باید روی کانتینر اعمال شود.

selector{
    background-position: top;
    background-size: cover;
    transition: background-position 8s ease-in-out;
}

selector:hover {
    background-position: bottom;
}
selector:not(:hover) {
    transition: background-position 1s ease-in-out;
}

وقتی مسیرها به‌هم می‌رسن، تجربه شکل می‌گیره.
این لاین‌ها منطق UX هستن، نه فقط اتصال بین صفحات. 🧠✨

#work

🛍 مشکل رایج در طراحی فروشگاه با المنتور!

حتماً برات پیش اومده که تصاویر محصولاتت توی گرید، اندازه‌های مختلف دارن 😐
یکی کشیده، یکی کوچیک، یکی بزرگ… و کل ظاهر سایتو خراب می‌کنه!

✅ راه حل ساده با CSS:

کافیه این کد رو به کلاس تصویر کارت محصولت بدی 👇

    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;

💡 این کد چیکار می‌کنه؟

* همه تصاویر رو هم‌اندازه می‌کنه
* جلوی کشیده شدن عکس رو می‌گیره
* ظاهر گریدت رو کاملاً حرفه‌ای می‌کنه