بلاگ

25 نمونه از سری کارت های متریال دیزاین به همراه سورس css

25 نمونه از سری کارت های متریال به همراه سورس css

امتیاز کاربران

ستاره فعالستاره فعالستاره فعالستاره فعالستاره فعال
 

طراحی متریال یک زبان طراحی توسعه یافته است که در سال 2014 توسط گوگل خلق شده است.این نوع طراحی براساس ( طراحی کارتی ) که در google Now مورد استفاده قرار میگرفت طراحی شده است. در سال 2015 طراحی متریال به اکثر اپلیکیشن های اندروید وارد شد و سرانجام  این نوع طراحی با فریم ورک متریال وارد عرصه وب شد و بسیار از آن استقبال شد.یکی از عناصر تاثیر گذار در طراحی متریال کارت ویو ها هستند. در این پست من 25 نوع از سری کارت ها ی گوگل را به همراه سورس آن در کد اپن برای شما معرفی خواهم کرد.بد نیست بدانید که کارت ها بهترین وسیله برای نمایش محتوا با ترکیبی از عناصر مختلف میباشند که میتوانید در سایت خود از آن استفاده کنید.

کارت نمایش اطلاعات آب و هوا (Material Weather Card)

1- کارت نمایش اطلاعات آب و هوا (Material Weather Card)

مشاهده و دانلود سورس

کارت نمایش پست ها و مطالب (Article News Card)

2- کارت نمایش پست ها و مطالب (Article News Card)

مشاهده و دانلود سورس

کارت نمایش محصولات ( Product Card)

3- کارت نمایش محصولات ( Product Card)

مشاهده و دانلود سورس

کارت نمایش محصولات ویدیویی به همراه انیمیشن و ستاره ( Movie Card)

4- کارت نمایش محصولات ویدیویی به همراه انیمیشن و ستاره ( Movie Card)

مشاهده و دانلود سورس

 کارت نمایش دمو اعضا ( Material cards demo)

5- کارت نمایش دمو اعضا ( Material cards demo)

مشاهده و دانلود سورس

 کارت نمایش شناور پست ها به صورت سه بعدی (Drag And Throw 3D Card Pile)

6- کارت نمایش شناور پست ها به صورت سه بعدی (Drag And Throw 3D Card Pile)

مشاهده و دانلود سورس

 کارت ویزیت و شخصی (CSS Business Card)

7- کارت ویزیت و شخصی (CSS Business Card)

مشاهده و دانلود سورس

 کارت هاور و عکس العمل دهنده ( Hover Card)

8- کارت هاور و عکس العمل دهنده ( Hover Card)

مشاهده و دانلود سورس

 کارت نمایش کد تخفیف یا هدیه ( Gift Card UI)

9- کارت نمایش کد تخفیف یا هدیه ( Gift Card UI)

مشاهده و دانلود سورس

 کارت تحویل ( Delivery Card Animation)

10- کارت تحویل ( Delivery Card Animation)

مشاهده و دانلود سورس

 کارت نمایش اسلایدی مطالب (Card Slide – CSS reveal)

11- کارت نمایش اسلایدی مطالب (Card Slide – CSS reveal)

مشاهده و دانلود سورس

 کارت نمایش خاص ( PURE CSS CARD DECK)

12- کارت نمایش خاص ( PURE CSS CARD DECK)

مشاهده و دانلود سورس

 Material Design Card – For Blog Post Article

13- کارت نمایش پست های وبلاگ (Material Design Card – For Blog Post Article)

مشاهده و دانلود سورس

 کارت نمایش فرم تماس با ما (Material Design Contact Form)

14- کارت نمایش فرم تماس با ما (Material Design Contact Form)

مشاهده و دانلود سورس

 کارت نمایش فروش محصولات ( Shop card)

15- کارت نمایش فروش محصولات ( Shop card)

مشاهده و دانلود سورس

 کارت نمایش و افزودن به سبد خرید ( jQuery. Fly to cart effect)

16- کارت نمایش و افزودن به سبد خرید ( jQuery. Fly to cart effect)

مشاهده و دانلود سورس

کارت نمایش منو (Responsive Menu App) 

17- کارت نمایش منو (Responsive Menu App)

مشاهده و دانلود سورس

 کارت نمایش فیلم های ویدیویی و بررسی براساس امتیاز و ستاره ( Movie Card)

18- کارت نمایش فیلم های ویدیویی و بررسی براساس امتیاز و ستاره ( Movie Card)

مشاهده و دانلود سورس

 کارت نمایش ویجت ( City Widget)

19- کارت نمایش ویجت ( City Widget)

مشاهده و دانلود سورس

 کارت نمایش محصولات غذایی و سایر آیتم ها به همراه امتیاز کاربران ( Food Widget)

20- کارت نمایش محصولات غذایی و سایر آیتم ها به همراه امتیاز کاربران ( Food Widget)

مشاهده و دانلود سورس

 کارت نمایش نقل و قول نظرات ( Einstien Quotes)

21- کارت نمایش نقل و قول نظرات ( Einstien Quotes)

مشاهده و دانلود سورس

 کارت نمایش نظرات و افزودن نظر ( Places comments)

22- کارت نمایش نظرات و افزودن نظر ( Places comments)

مشاهده و دانلود سورس

 کارت نمایش پروفایل کاربران ( Twitter Profile)

23- کارت نمایش پروفایل کاربران ( Twitter Profile)

مشاهده و دانلود سورس

 کارت نمایش اسلایدی محصولات فروشگاهی ( Shopping cart slider)

24- کارت نمایش اسلایدی محصولات فروشگاهی ( Shopping cart slider)

مشاهده و دانلود سورس

 کارت نمایش پست و مطالب به همراه انیمیشن ( Material Overlay Animation)

25- کارت نمایش پست و مطالب به همراه انیمیشن ( Material Overlay Animation)

مشاهده و دانلود سورس

طراحی و برنامه نویسی قالب و افزونه های اختصاصی

سفارش پروژه
888-3035 0933
راه آسان تری برای ارتباط با کاربران مان پیدا کرده ایم ツ کانال تلگرام آی سی ام اس
بحث درباره این پست را شما آغاز کنید! ارسال دیدگاه

دیدگاه (4)

This comment was minimized by the moderator on the site

این مطلبتون عالی بود
خیلی خیلی بدردم خورد

This comment was minimized by the moderator on the site

خواهش میکنم
موفق باشید

This comment was minimized by the moderator on the site

نمونه 3 و 15 رو من دارم توی سایتم استفاده میکنم
خیلی شیک و عالیه

This comment was minimized by the moderator on the site

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

هنوز دیدگاهی بیان نشده است

ارسال دیدگاه

پیوست ها (0 / 3)
Share Your Location
محمدحسین نیازی پاسخ گوی شماست

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

مدیر و موسس آی سی ام اس

آی سی ام اس