ایجاد اجزای کارت سفارشی با HTML و CSS

یاد بگیرید که چگونه این مؤلفه جذاب را بسازید و از آن برای افزودن حس حرفه ای به طراحی های وب خود استفاده کنید.

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

نحوه ساخت اجزای کارت با استفاده از HTML و CSS را بیاموزید و در مورد ملاحظات دسترسی و سفارشی سازی بیاموزید.

ساختار HTML برای اجزای کارت

آناتومی یک کارت شامل ظرف کارت، هدر، تصویر و بدنه آن و پاورقی کارت اختیاری است.

شما سه جزء ساده کارت ایجاد خواهید کرد: کارت های محتوا، محصول و مشخصات. اینها برخی از رایج ترین انواع کارت موجود در وب هستند.

با ایجاد یک کانتینر div، تودرتو کردن سه تگ div دیگر با ویژگی‌های کلاس برای هر کارت در آن، با عناصر فرزند مناسب برای هر یک از سه کارت شروع کنید. شما باید از عناصری استفاده کنید که تمام بخش‌های آناتومی کارت را تشکیل می‌دهند. به عنوان مثال، کارت محتوا دارای یک برچسب تصویر برای رسانه، یک تگ h3 برای عنوان و یک تگ p برای متن است.

<div class="card-container">
    <!-- Content Card -->
    <div class="content-card">
        <img src="https://images.unsplash.com/photo-1500989145603-8e7ef71d639e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A workspace with a keyboard notebook, cup of coffee and an earpiece">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
       excepturi explicabo molestiae natus magnam rem...</p>
        <a href="#">Read More</a>
    </div>

    <!-- Product Card -->
    <div class="product-card">
        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Headphones on a yellow background">
        <h3>Product Name</h3>
        <p>$19.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Aspernatur, voluptatibus.</p>
        <a href="#"><button>Add to Cart</button></a>
    </div>

    <!-- Profile Card -->
    <div class="profile-card">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A white male wearing a black button up shirt">
        <h3>John Doe</h3>
        <p>Web Developer</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Expedita tempora eos molestias repellat?</p>
        <a href="#" class="profile-link">View Profile</a>
    </div>
</div>

قبل از اعمال هر گونه استایل سفارشی، به طور پیش فرض در مرورگر شما باید به این شکل باشد:

اگر می‌خواهید کارت‌های بیشتری ایجاد کنید یا محتوای بیشتری را در یک کارت قرار دهید، قبل از ادامه این کار را انجام دهید.

یک ظاهر طراحی CSS برای اجزای کارت

با استفاده از CSS، می توانید به صورت جداگانه به هر کارت استایل دهید تا از نظر بصری جذاب باشد. از انتخابگر جهانی برای تنظیم مجدد حاشیه ها، لایه ها و موقعیت با استفاده از اندازه جعبه استفاده کنید. سپس ظرف را با دادن بالشتک به آن حالت دهید تا کمی فضا ایجاد شود.

​​​​​​* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
    padding: 20px;
}

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

.content-card,
.product-card,
.profile-card {
    margin: 20px;
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;
    border-radius: 7px;
    max-width: 250px;
}

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

تصویر را با حداکثر عرض و شعاع حاشیه استایل کنید. حاشیه، font-family و اندازه فونت را برای h3 تنظیم کنید. برای تگ لنگر، تزئین متن را حذف کنید و رنگ، حاشیه بالا و اندازه فونت را تنظیم کنید.

.content-card {
    background: #E9724C;
    padding: 10px;
}

.content-card img {
    max-width: 100%;
    border-radius: 5px;
}

.content-card h3 {
    margin: 10px 0;
    font-family: monospace;
    font-size: 1.5rem;
}

.content-card a {
    text-decoration: none;
    color: #6f2ed8;
    margin:12px 0 7px 0;
    font-size: 1rem;
}

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

عنصر دکمه حاوی بیشترین ویژگی های سبک برای دستیابی به اثر فراخوانی است. با تنظیم کردن align-self روی flex-end در انتخابگر لنگر، فقط دکمه سمت راست را تراز کنید.

.product-card img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.product-card h3 {
    margin: 5px 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.product-card p {
    margin: 5px 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.product-card a {
    align-self: flex-end;
}

.product-card button {
    width: 100px;
    height: 30px;
    margin: 10px;
    border: 1px solid #8f3642;
    border-radius: 4px;
    background-color: #FFC857;
    font-weight: 700;
    cursor: pointer;
}

در نهایت به کارت پروفایل حالت دهید. شعاع حاشیه را در سمت راست بالا و سمت چپ بالای تصویر تنظیم کنید تا با ظرف مطابقت داشته باشد. اندازه تصویر را تنظیم کنید و در صورت لزوم تناسب داشته باشید. حداقل از دو نوع فونت و رنگ مکمل روی متون برای تعریف استفاده کنید. همچنین، می‌توانید عنصر عمل‌پذیر را بسازید—یعنی. تگ لنگر – با یک حاشیه برجسته شوید.

.profile-card img {
    border-radius: 5px 5px 0 0;
    height: 200px;
    object-fit: cover;
}

.profile-card h3 {
    margin: 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.profile-card p:first-of-type {
    margin:0px 10px;
    font-family: 'Times New Roman', Times, serif;
    color: cornflowerblue;
}

.profile-card p:last-of-type {
    margin: 5px 10px;
    font-size: 0.9rem;
}

.profile-card a {
    text-decoration: none;
    margin: 5px 10px 10px 10px;
    padding: 5px 15px;
    align-self: center;
    border: 1px solid cornflowerblue;
    border-radius: 15px;
    color: black;
    font-family: monospace;
    font-weight: 500;
}

پس از استایل کردن، کارت های شما باید به این شکل باشد:

چیدمان کارت و انعطاف پذیری

پاسخگویی برای ارائه یک تجربه یکپارچه با رابط بین دستگاه‌ها حیاتی است. می توانید از CSS Flexbox یا CSS Grid برای طرح بندی استفاده کنید. در نهایت، می توانید از پرسش های رسانه ای برای پاسخگویی استفاده کنید.

با استفاده از CSS Flexbox

ابتدا یک ویژگی نمایش اضافه کنید و آن را روی انتخابگر ظرف کارت خود انعطاف پذیر کنید. بسته بندی انعطاف پذیر را اعمال کنید و آن را روی بسته بندی قرار دهید تا کارت ها بتوانند در اندازه صفحه نمایش کوچک بسته شوند.

همچنین، ویژگی های align-item و justify-content را مطابق میل خود تنظیم کنید.

​​​​​​.card-container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

صفحه باید شبیه این باشد:

این نتیجه پاسخگویی در اندازه های صفحه نمایش بزرگتر است. برای یک نمای کوچکتر، مانند تلفن همراه، می توانید از قانون پرس و جو رسانه استفاده کنید و حداکثر عرض را تنظیم کنید.

در پرس و جو رسانه، تعیین کنید که کدام عناصر را می خواهید تغییر دهید. در این صورت ظرف کارت تغییر می کند.

جهت انعطاف پذیری را روی ستون قرار دهید، بنابراین کارت ها به صورت عمودی روی هم قرار گیرند. برای نمایش کارت ها در مرکز صفحه، به صورت افقی، ویژگی justify-content and align-items را در مرکز قرار دهید:

@media screen and (max-width: 480px) {
  .card-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
}

برای دیدن جلوه پرس و جو رسانه، کد موجود در CodePen را بررسی کنید.

با استفاده از CSS Grid

ابتدا صفحه نمایش محفظه کارت را روی شبکه قرار دهید. از ستون‌های grid-template استفاده کنید تا به کارت‌ها اجازه دهید عرض خود را به طور خودکار تنظیم کنند. از یک شکاف شبکه برای فاصله بین کارت ها استفاده کنید. از موارد justify برای وسط کارت ها استفاده کنید.

.card-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    justify-items: center;
}

صفحه باید شبیه این باشد:

برای صفحه‌های موبایل، درخواست رسانه را اعمال کنید. در پرس و جو، طرح شبکه را برای درگاه های نمایش کوچکتر تغییر دهید. ستون‌های grid-template را روی 1fr تنظیم کنید تا هر کارت تمام عرض را اشغال کند. همچنین، تنظیم ویژگی های justify-item و align-item در مرکز، کارت ها را به صورت افقی و عمودی در مرکز قرار می دهد.

@media screen and (max-width: 480px) {
  .card-container {
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
  }
}

با ترکیب CSS Grid و پرسش‌های رسانه، کارت‌ها روی صفحه‌های بزرگ‌تر قرار می‌گیرند و به صورت عمودی روی صفحه‌های کوچک‌تر قرار می‌گیرند و به طرح‌بندی کارت واکنش‌گرا دست می‌یابند. برای دیدن جلوه پرس و جو رسانه، کد موجود در CodePen را بررسی کنید.

ملاحظات دسترسی برای اجزای کارت

بسیار مهم است که اطمینان حاصل شود که اجزای کارتی که ایجاد می کنید برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترسی است. در اینجا چند نکته کلیدی برای دسترسی بیشتر به اجزای کارت وجود دارد:

• HTML معنایی
• ناوبری صفحه کلید
• سبک های تمرکز
• برچسب ها و نقش های ARIA
• متن جایگزین
• ساختار سرفصل مناسب
• تضاد رنگ

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

سفارشی سازی و کاوش بیشتر

می‌توانید با سفارشی کردن مؤلفه کارتتان بیشتر پیش بروید. در اینجا چند ایده وجود دارد که می توانید به آنها توجه کنید:

• انتقال و انیمیشن
• سبک های تصویر
• پس زمینه و طرح های رنگی
• سبک های حاشیه
• عناصر تعاملی

راه‌های مختلفی وجود دارد که می‌توانید اجزای کارت خود را سفارشی کنید، بنابراین با خیال راحت آزمایش کنید.

اجزای کارت بصری جذاب و پاسخگو ایجاد کنید

اجزای کارت تقریباً در هر وب سایتی می توانند نقش داشته باشند. ساختن یکی با HTML و CSS آسان است، اما دانستن نحوه مدیریت دسترسی نیز مهم است.

جلوه های CSS دیگری نیز وجود دارد که می توانید آنها را امتحان کنید، مانند فیلترهای CSS و حالت ترکیبی برای جلوه های بصری. برای جذابیت بصری، با سفارشی سازی های مختلف بیشتر ایجاد کنید.

منبع مقاله