10 قطعه کد رایگان برای ایجاد کارت های محتوایی CSS

          آموزش تک 
            بازدید : 79
          شنبه 11 اسفند 1397
           نظرات (0)
        

Parallax Depth Cards

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

Product Card

هنگامی که به لیست محصولات آنلاین می آید، ساده معمولا بهتر است. چنین موردی با سادگی زیبا این کارت محصول است. نیاز به جزئیات بیشتر؟ حادثه نشان می دهد اطلاعات اندازه و رنگ. نتیجه یک UI بسیار ظریف است.

Article News Card

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

Blog Cards

ما برای دیدن کارت ها در فرمت عمودی استفاده می شود. این یکی از دلایلی است که چشم انداز طرح افقی Chyno Deluxe بسیار قابل توجه است. دلیل دیگر این است که آنها فقط نگاه شگفت انگیزی دارند. این طرح با هم به خوبی ساخته شده است، با لبه عکس زاویه ای اضافه شده یک اثر درجه یک. Hovering مطالب بیشتری را در بالای عکس نشان می دهد.

Material Design: Profile Card

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

News Cards – CSS only

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