بلاگ

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
راه آسان تری برای ارتباط با کاربران مان پیدا کرده ایم ツ کانال تلگرام آی سی ام اس

برخی محصولات مارکت

210,000تومان
95,000تومان
پیش نمایش: http://bit.ly/2vLhYfN
مـــستنـــدات: http://bit.ly/2ne57id
با دریافت این محصول 95 آی بُن هدیه بگیرید
55 % تخفیف با

199,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2srnaDw
مـــستنـــدات: http://bit.ly/2IXsp54
با دریافت این محصول 49 آی بُن هدیه بگیرید
75 % تخفیف با

325,000تومان
49,000تومان
پیش نمایش: http://bit.ly/2ITv7c0
مـــستنـــدات: http://bit.ly/2GQBH0Y
با دریافت این محصول 49 آی بُن هدیه بگیرید
85 % تخفیف با

دیدگاه (2)

  1. مهدی

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

  1. محمد طاها

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

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

ارسال دیدگاه

پیوست ها (0 / 3)
Share Your Location

با آی بن ارزان تر خرید کنید

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

از آی بن بیشتر بدانید

نظرات کاربران

پویا عظیمی نظری را ارسال کرده است در :از سیر تا پیاز پشتیبانی آنلاین در وردپرس و جوملا با Crisp
با سلام واریز ممبر برای کانال انجام میدم با قیمت بسیار ...
ارسال شده در Joomla Article سه شنبه, 21 آگوست 2018 14:05
محمد نظری را ارسال کرده است در :فعال کردن طراحی متریال دیزاین در گوگل کروم
ترفند مفیدی قود سپاس
ارسال شده در Joomla Article دوشنبه, 13 آگوست 2018 14:34
مهشید نظری را ارسال کرده است در :فعال کردن طراحی متریال دیزاین در گوگل کروم
ترفند مفیدی بود فقط بنظرم کاش دکمه ادد تب سمت راست بود ن
ارسال شده در Joomla Article یکشنبه, 05 آگوست 2018 14:26
محمدحسین نیازی نظری را ارسال کرده است در :رفع مشکل کار نکردن فیلد های کشویی ویرچومارت در زبان فارسی
سلام سپاس گذارم از لطفی که دارید
ارسال شده در Joomla Article پنج شنبه, 07 جون 2018 12:06

سوالات و اشکالات فنی در رابطه با محصول تهیه شده را میتوانید از پشتیبانی آی سی ام اس بپرسید

ثبت نام

 
محمدحسین نیازی پاسخ گوی شماست

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

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