۱۰ کد آماده برای طراحی کارت‌های محصول لوکس و مدرن

<!-- HTML Structure -->
<div class="product-card parallax-card">
    <div class="parallax-img-container">
        <img src="product-image.jpg" alt="نام محصول" class="parallax-img">
    </div>
    <div class="product-info">
        <h3>نام محصول لوکس</h3>
        <p>توضیحات کوتاه محصول جذاب شما.</p>
        <span class="price">$299.00</span>
        <button>افزودن به سبد</button>
    </div>
</div>

<!-- CSS Styles -->
<style>
.parallax-card {
    width: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background-color: #fff;
}
.parallax-card:hover {
    transform: translateY(-5px);
}
.parallax-img-container {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* برای انیمیشن حرکت */
}
.parallax-card:hover .parallax-img {
    transform: scale(1.05); /* زوم ملایم هنگام هاور */
}
.product-info {
    padding: 20px;
    text-align: center;
}
/* می‌توانید JavaScript را برای افکت پارالاکس عمیق‌تر اضافه کنید */
</style>

<!-- JavaScript (برای افکت پیشرفته‌تر) -->
<script>
document.querySelectorAll('.parallax-card').forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const img = card.querySelector('.parallax-img');
        const { left, top, width, height } = card.getBoundingClientRect();
        const x = (e.clientX - left - width / 2) / (width / 2);
        const y = (e.clientY - top - height / 2) / (height / 2);
        img.style.transform = `scale(1.05) translate(${x * 10}px, ${y * 10}px)`;
    });
    card.addEventListener('mouseleave', () => {
        card.querySelector('.parallax-img').style.transform = 'scale(1.05) translate(0, 0)';
    });
});
</script>

کپی کد

.product-card-shadow {
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1), /* سایه نزدیک‌تر و کم‌رنگ‌تر */
        0 12px 20px rgba(0, 0, 0, 0.08), /* سایه دورتر و متوسط */
        0 30px 60px rgba(0, 0, 0, 0.05); /* سایه بسیار دور و محو */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.product-card-shadow:hover {
    box-shadow: 
        0 6px 10px rgba(0, 0, 0, 0.15),
        0 18px 30px rgba(0, 0, 0, 0.12),
        0 45px 90px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px); /* حرکت ملایم به سمت بالا هنگام هاور */
}

کپی کد

.product-card-hover {
    /* استایل‌های پایه کارت */
    width: 300px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* ترانزیشن روان‌تر */
    position: relative;
    overflow: hidden;
}

.product-card-hover:hover {
    transform: translateY(-8px) scale(1.02); /* حرکت به بالا و کمی بزرگ شدن */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* سایه عمیق‌تر */
    border-color: #007bff; /* تغییر رنگ بوردر (اختیاری) */
}

/* برای اضافه کردن یک خط جذاب هنگام هاور */
.product-card-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #007bff, #00c6ff); /* گرادیان آبی */
    transform: scaleX(0); /* مخفی در حالت عادی */
    transform-origin: left;
    transition: transform 0.3s ease-out;
}
.product-card-hover:hover::before {
    transform: scaleX(1); /* ظاهر شدن خط هنگام هاور */
}

کپی کد

.add-to-cart-btn {
    background: linear-gradient(45deg, #007bff, #00c6ff); /* گرادیان آبی جذاب */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 30px; /* دکمه گرد */
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    outline: none;
}

.add-to-cart-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.45);
    background: linear-gradient(45deg, #00c6ff, #007bff); /* تغییر جهت گرادیان یا رنگ */
}

.add-to-cart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

کپی کد

<!-- HTML Structure -->
<div class="products-grid">
    <!-- Product Card 1 -->
    <div class="product-card">...</div>
    <!-- Product Card 2 -->
    <div class="product-card">...</div>
    <!-- و غیره -->
</div>

<!-- CSS Styles -->
<style>
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* رسپانسیو بودن */
    gap: 30px; /* فاصله بین کارت‌ها */
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* رسپانسیو برای صفحات کوچک‌تر */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr; /* یک ستون در موبایل */
        padding: 15px;
    }
}
</style>

کپی کد

<!-- در بخش <head> سایتت اضافه کن -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
.product-card-typography h3 { /* عنوان محصول */
    font-family: 'Playfair Display', serif; /* فونت لوکس و سریف */
    font-size: 1.6em;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-card-typography p { /* توضیحات محصول */
    font-family: 'Inter', sans-serif; /* فونت مدرن و خوانا */
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.product-card-typography .price { /* قیمت محصول */
    font-family: 'Inter', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: #00796b; /* رنگ سبز برای قیمت */
    margin-top: 10px;
    display: block;
}
</style>

کپی کد

<!-- HTML Structure -->
<div class="product-card">
    <div class="product-tags">
        <span class="tag new" data-tooltip="این محصول جدیدترین نسخه است">جدید</span>
        <span class="tag sale" data-tooltip="۲۰٪ تخفیف فقط امروز!">تخفیف</span>
    </div>
    <!-- بقیه محتوای کارت -->
</div>

<!-- CSS Styles -->
<style>
.product-tags {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.tag {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    cursor: help;
    transition: background-color 0.2s ease;
}
.tag.new { background-color: #28a745; }
.tag.sale { background-color: #dc3545; }

/* Tooltip Styles */
.tag::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px); /* قرار گرفتن بالا */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
}
.tag::before { /* فلش tooltip */
    content: '';
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
}
.tag:hover::after, .tag:hover::before {
    opacity: 1;
    visibility: visible;
}
</style>

کپی کد

<!-- HTML Structure -->
<div class="product-accordion">
    <div class="accordion-item">
        <button class="accordion-header">مشخصات فنی <span class="icon">+</span></button>
        <div class="accordion-content">
            <p>پردازنده: A15 Bionic</p>
            <p>رم: 6GB</p>
            <p>حافظه: 128GB</p>
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">ابعاد و وزن <span class="icon">+</span></button>
        <div class="accordion-content">
            <p>ابعاد: 146.7 x 71.5 x 7.7 mm</p>
            <p>وزن: 204 گرم</p>
        </div>
    </div>
</div>

<!-- CSS Styles -->
<style>
.product-accordion {
    margin-top: 20px;
    border-top: 1px solid #eee;
}
.accordion-item {
    border-bottom: 1px solid #eee;
}
.accordion-header {
    background-color: #fdfdfd;
    color: #333;
    cursor: pointer;
    padding: 12px 15px;
    width: 100%;
    border: none;
    text-align: right;
    outline: none;
    font-size: 1em;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover {
    background-color: #f0f0f0;
}
.accordion-header .icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.accordion-header.active .icon {
    transform: rotate(45deg); /* آیکون + به x تبدیل می‌شود */
}
.accordion-content {
    padding: 0 15px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-content p {
    margin-bottom: 8px;
    padding-top: 5px;
    font-size: 0.95em;
    color: #666;
}
</style>

<!-- JavaScript -->
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        header.classList.toggle('active');
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        }
    });
});
</script>

کپی کد

<!-- HTML Structure (با فونت آیکون Font Awesome) -->
<!-- حتما Font Awesome CDN رو در <head> لود کن: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
<div class="star-rating" data-rating="4.5">
    <i class="far fa-star" data-value="1"></i>
    <i class="far fa-star" data-value="2"></i>
    <i class="far fa-star" data-value="3"></i>
    <i class="far fa-star" data-value="4"></i>
    <i class="far fa-star" data-value="5"></i>
    <span class="rating-text">(4.5 از 5)</span>
</div>

<!-- CSS Styles -->
<style>
.star-rating {
    font-size: 1.2em;
    color: #ffc107; /* رنگ ستاره‌های زرد */
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.star-rating i {
    cursor: pointer;
    margin: 0 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.star-rating i:hover {
    transform: translateY(-2px) scale(1.1);
}
.star-rating i.fas { /* ستاره‌های پر شده */
    color: #ffc107;
}
.star-rating .rating-text {
    font-size: 0.9em;
    color: #777;
    margin-right: 8px;
}
</style>

<!-- JavaScript -->
<script>
document.querySelectorAll('.star-rating').forEach(ratingContainer => {
    const stars = ratingContainer.querySelectorAll('i');
    const ratingValue = parseFloat(ratingContainer.dataset.rating);

    function updateStars(currentRating) {
        stars.forEach(star => {
            const value = parseInt(star.dataset.value);
            star.classList.remove('fas', 'far');
            if (value <= currentRating) {
                star.classList.add('fas'); // پر شده
            } else if (value - 0.5  {
        star.addEventListener('click', () => {
            const newValue = parseInt(star.dataset.value);
            // اینجا می‌توانید مقدار newValue را به سرور ارسال کنید یا در UI ذخیره کنید
            ratingContainer.dataset.rating = newValue;
            updateStars(newValue);
            ratingContainer.querySelector('.rating-text').textContent = `(${newValue}.0 از 5)`;
            alert(`شما به این محصول امتیاز ${newValue} دادید!`);
        });

        star.addEventListener('mouseover', () => {
            const hoverValue = parseInt(star.dataset.value);
            updateStars(hoverValue);
        });

        star.addEventListener('mouseleave', () => {
            updateStars(parseFloat(ratingContainer.dataset.rating)); // بازگشت به ریتینگ اولیه
        });
    });
});
</script>

کپی کد

<!-- HTML Structure -->
<div class="product-card">
    <!-- ... سایر محتوا ... -->
    <div class="stock-status available">
        <i class="fas fa-check-circle"></i> در انبار موجود است
    </div>
    <!-- یا -->
    <!-- <div class="stock-status low-stock">
        <i class="fas fa-exclamation-triangle"></i> فقط 3 عدد باقی مانده!
    </div> -->
    <!-- یا -->
    <!-- <div class="stock-status out-of-stock">
        <i class="fas fa-times-circle"></i> ناموجود
    </div> -->
</div>

<!-- CSS Styles -->
<style>
.stock-status {
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 15px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.stock-status i {
    font-size: 1.1em;
}

.stock-status.available {
    background-color: #e6ffed; /* سبز روشن */
    color: #28a745; /* سبز تیره */
    border: 1px solid #28a745;
}
.stock-status.low-stock {
    background-color: #fff3e0; /* نارنجی روشن */
    color: #ff9800; /* نارنجی تیره */
    border: 1px solid #ff9800;
}
.stock-status.out-of-stock {
    background-color: #ffebee; /* قرمز روشن */
    color: #dc3545; /* قرمز تیره */
    border: 1px solid #dc3545;
}

/* برای انیمیشن ظریف */
.stock-status:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

کپی کد

آیا این کدها برای تمامی پلتفرم‌ها (وردپرس، ری اکت و غیره) قابل استفاده هستند؟

بله، این کدها بیشتر بر پایه HTML, CSS و JavaScript خام هستند و به راحتی می‌توانند در هر پلتفرمی که امکان کدنویسی فرانت‌اند را فراهم می‌کند، مانند وردپرس (با استفاده از بلوک HTML سفارشی یا ویرایش قالب)، React، Vue یا هر فریم‌ورک دیگری، مورد استفاده قرار گیرند. فقط باید مطمئن شوید که فایل‌های CSS و JS را به درستی به پروژه خود اضافه می‌کنید.

چگونه می‌توانم این کدها را برای موبایل بهینه کنم؟

اکثر کدهای ارائه شده در اینجا با اصول طراحی واکنش‌گرا (Responsive Design) سازگار هستند. برای اطمینان بیشتر، همیشه از `media queries` در CSS خود برای تنظیماتی مانند `font-size`, `padding`, `margin` و `grid-template-columns` بر اساس اندازه صفحه نمایش استفاده کنید. همچنین، استفاده از واحدهای نسبی مانند `rem`, `em` یا `vw` به جای `px` برای ابعاد و فونت‌ها، به انعطاف‌پذیری بیشتر در موبایل کمک می‌کند.

آیا استفاده از انیمیشن‌ها و افکت‌های زیاد، سرعت سایت را کم نمی‌کند؟

این نگرانی کاملاً بجاست. اگرچه انیمیشن‌ها جذابیت بصری را افزایش می‌دهند، استفاده بی‌رویه یا غیربهینه از آن‌ها می‌تواند بر عملکرد سایت تأثیر بگذارد. توصیه‌های کلیدی عبارتند از:

• **استفاده از `transform` و `opacity`:** این ویژگی‌ها توسط GPU (واحد پردازش گرافیک) رندر می‌شوند و از `layout` و `paint` مجدد مرورگر جلوگیری می‌کنند، بنابراین بسیار بهینه‌تر هستند.
• **`will-change`:** با افزودن `will-change` به المنت‌هایی که قرار است متحرک شوند، به مرورگر اجازه می‌دهید تا از قبل برای تغییرات آماده شود.
• **کاهش تعداد انیمیشن‌های همزمان:** از اجرای تعداد زیادی انیمیشن پیچیده به صورت همزمان خودداری کنید.
• **بهینه‌سازی تصاویر:** تصاویر محصول خود را فشرده کرده و از فرمت‌های مدرن (مانند WebP) استفاده کنید.

چگونه می‌توانم مطمئن شوم که کارت‌های محصولم “لوکس” به نظر می‌رسند؟

لوکس بودن در طراحی از ترکیب چندین فاکتور ناشی می‌شود:

• **مینیمالیسم و فضای سفید:** شلوغی را کم کنید و به عناصر فضای تنفس کافی بدهید.
• **تایپوگرافی باکیفیت:** از فونت‌های زیبا و خوانا استفاده کنید.
• **پالت رنگی ظریف:** رنگ‌های تیره، متالیک، یا پاستلی با کنتراست مناسب می‌توانند حس لوکس بودن را منتقل کنند.
• **انیمیشن‌های ظریف و روان:** افکت‌ها باید نامحسوس و پاسخگو باشند، نه پر زرق و برق.
• **تصاویر با کیفیت بالا:** تصاویر محصول باید حرفه‌ای و با رزولوشن بالا باشند.
• **توجه به جزئیات:** حتی کوچکترین حاشیه‌ها، سایه‌ها و آیکون‌ها باید با دقت طراحی شوند.

هدف این است که طراحی شما حس کیفیت و انحصار را به کاربر منتقل کند.