10 قطعه کد متریال رایگان به صورت اپن سورس

کد جدول رسپانسیو

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

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

من فکر می کنم این روش یکی از بهترین راه های رسیدگی به آن است. کد شما همچنان تمیز است که باعث می شود کد فوق بدون نیاز به اندازه جدول شما فوق العاده آسان باشد.

انتقال UI کارت

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

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

اثرات انیمیشن بی عیب و نقص هستند و نشان می دهند که امروز چه میزان می توانید در وب انجام دهید. به ذکر است که سبک مواد در اینجا برای این combo web / mobile UI است.

ورود به سایت فشرده

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

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

پس چطوری؟ این مقدار زیادی از جاوا اسکریپت را استفاده می کند، بنابراین این راه حل جدا از کد نیست. اما هنوز هم یک نمونه عالی از طراحی با ویژگی های جمع و جور است.

جمع کردن انیمیشن

Scott Kellum این طرح جالب ماتریس را ایجاد کرد که به صورت خودکار بارگذاری می شود. این در شبکه ای است که در آن شما می توانید هر کارت را مشاهده کنید تا ویژگی های طراحی مواد را در عمل مشاهده کنید.

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

دکمه های BS4 مواد

از بسیاری از قالب های بوت استرپ موجود در اینترنت شما بهتر است که بعضی از آنها را از طراحی مواد استفاده کنید. و این قلم ظاهر تمام چیزهای جالب شما می توانید با طراحی مواد در بوت استرپ 4 انجام دهید.

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

اگر شما در بوت استرپ جدی هستید، نگاهی به جدیدترین نسخه برای دیدن آنچه که فکر می کنید نگاه کنید. این کار به عنوان یک پایه برای هر چیزی کار می کند، و این به ویژه برای سایت های مواد.

طراحی محتوا انتخاب منو

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

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

این به سبک سند معمولی برای انتخاب یک گزینه تکیه نمی کند. در عوض، این یک لیست غیر ارادی با استفاده از jQuery را برای پردازش انیمیشن ها و انتخاب می کند. و باید بگویم، این چیز سبک مواد را میخکوب میکند.

سایه مواد

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

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

یک اثر بسیار زیبا و مطمئنا چیزی است که شما ممکن است در پروژه های خود را کپی کنید.

هوا کارت UI

توسعهدهنده توماس والسل این کارت هوا را عالی اجرا کرد و در حال اجرا بر روی HTML و CSS خالص بود. این یک اثر ساده محو کننده در pageload استفاده می کند، اما زیبایی واقعی در اینجا سبک طراحی مواد است.

همه چیز از رنگ ها به فونت و حتی آیکون آب و هوا، همه آنها به سبک های طبیعی مواد تکیه می کنند.

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

زبانهها مواد

در اینجا یک پروژه جالب است که بر روی ایده زبانه های طراحی مواد طراحی شده است. مایکل ریچینز این قلم را با برخی از اساسی جاوا اسکریپت و برخی از دانش های راهنمای طراحی گوگل ایجاد کرده است.

زبانهها همانطور که در سایر دستگاههای مشابه مانند گوشیهای هوشمند یا رایانههای لوحی نیز انتظار دارند، کار میکنند. به ذکر این چیز بر روی وانیل جاوا اسکریپت اجرا می شود ، بنابراین شما هرگز نباید درباره جی کوئری یا هر کدام از این موارد نگران باشید.

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

روی Response Animation کلیک کنید

توسعهدهنده امانوئل پیلند اثر این پاسخ سرد را به عنوان یک راه ساده برای تکرار میکروکنترلهای گوگل ایجاد کرد.

برای دیدن اثر در هر کجا در کارت های مواد غذایی کلیک کنید. و شما می توانید تقریبا هر چیزی را از دکمه های صفحه یا زمینه های ورودی استفاده کنید.

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