10 مقتطفات مفيدة لكود تصميم المواد

إن جنون تصميم المواد يأخذ عالم الويب في طريق العاصفة. كل شهر أجد مواقع جديدة تعمل على نمط المواد باستخدام الأطر أو مجموعات واجهة المستخدم المخصصة.

لكن هذا ليس شيئًا سيئًا ، بل على العكس تمامًا! هذه طريقة لتبسيط عملية التصميم الخاصة بك من خلال العمل مع الاتجاهات المثبتة التي تعترف بها Google كلغة التصميم المفضلة لديهم.

إذا كنت كبيرًا في أسلوب تصميم المواد ، فستكون مقتطفات الشفرة هذه مناسبة لك. هذه مجرد 10 من المفضلة التي تقدم مجموعة متنوعة من التصميمات والمكونات للاختيار من بينها.

جدول مستجيب

إليك مقتطف تصميم متعدد الأبعاد بلمسة فريدة. هذا الجدول سريع الاستجابة الذي أنشأه سيرجي كوبليتسكي يستضيف بالفعل روابط أخرى لمقتطفات تصميم المواد. لطيف جدا!

يتم إنشاء هذا بشكل طبيعي باستخدام تقنيات تصميم المواد أيضًا ، لذا يجب أن يتناسب الجدول تمامًا مع التخطيط الخاص بك. لكن أصعب جزء في تصميم الأجهزة المحمولة هو صنع طاولات تعمل على شاشات أصغر حجمًا.

أعتقد أن هذه الطريقة هي واحدة من أفضل الطرق للتعامل معها. يظل الرمز الخاص بك نظيفًا أيضًا مما يجعل من السهل جدًا البرمجة والتنظيف والإدارة بغض النظر عن حجم الجدول الخاص بك.

انتقالات بطاقة واجهة المستخدم

قام المطور Ivan Villamil ببناء تصميم فريد لواجهة مستخدم البطاقة مع بعض الرسوم المتحركة المجنونة جدًا.

ألق نظرة على الصفحة وحاول النقر فوق أي من البطاقات. ستحصل على تأثير متحرك فريد حيث تتحرك محتويات البطاقة فوق الحاوية وتظهر في العرض. إنه يشبه شيئًا تتوقع أن تجده في تطبيق جوال ، لكن تم نقله إلى الويب!

تأثيرات الرسوم المتحركة لا تشوبها شائبة ، وهي تُظهر مقدار ما يمكنك فعله على الويب اليوم. ناهيك عن أن نمط المواد هو الحال بالنسبة لواجهة مستخدم الويب / الجوال هذه.

تسجيل الدخول المضغوط

لقد رأيت بعض نماذج تسجيل الدخول الرائعة على مدار سنوات عملي كمصمم. لكن هذا التصميم المجنون قد يأخذ الكعكة لميزاتها التفاعلية وأنماطها الفريدة.

عند النقر فوق الرمز الوردي الفاتح في الزاوية العلوية اليمنى ، ستحصل على حقل تسجيل يظهر فوق الصفحة. إنها فريدة جدًا من نوعها ، وهي تنشئ واجهة قابلة للاستخدام حقًا.

إذن ما هي الفائدة؟ يستخدم هذا الكثير من JavaScript ، لذا فهو ليس الحل الأكثر دقة من حيث الكود. لكنه لا يزال مثالًا ممتازًا للتصميم بميزات مضغوطة.

نشر الرسوم المتحركة

قام Scott Kellum بتطوير تخطيط بطاقة المواد المثير للاهتمام والذي يتم ملؤه تلقائيًا بمجرد تحميل الصفحة. يتطور هذا في شبكة حيث يمكنك تحريك كل بطاقة لمشاهدة ميزات تصميم المواد قيد التنفيذ.

لا أستطيع أن أقول مدى فائدة هذا في مشروع مباشر أو إلى أي مدى يمكنك الخروج منه. لكن هذا مقتطف ممتع يُظهر تصميمًا خارج الشبكة للويب ، ويمزج في لمسة من نكهة المواد مع الرسوم المتحركة بالمرور.

أزرار المواد BS4

من بين العديد من قوالب Bootstrap المتاحة عبر الإنترنت ، من الأفضل أن تعتقد أن بعضها يستخدم تصميم متعدد الأبعاد. ويعرض هذا القلم جميع الأشياء الرائعة التي يمكنك القيام بها باستخدام التصميم متعدد الأبعاد في Bootstrap 4.

حقًا هذه مجرد مجموعة من الأزرار أعيد تصميمها بلغة Google المادية. ولكن كل ذلك يعمل على أحدث إطار عمل BS4 حتى تتمكن من إضافتها إلى أي صفحة تعمل بنظام Bootstrap.

إذا كنت جادًا بشأن Bootstrap ، فقم بإلقاء نظرة على أحدث إصدار لترى ما هو رأيك. إنه يعمل بشكل رائع كأساس لأي شيء ، وهذا ينطبق بشكل خاص على المواقع المادية.

قائمة تحديد تصميم المواد

تعد قوائم التحديد المنسدلة عنصرًا أساسيًا في تصميم النموذج. إنها تتيح للمستخدمين الاختيار من بين مجموعة من الإجابات حول الموضوعات ذات الصلة مثل الدول والبلدان واللغات وما إلى ذلك.

يؤدي تحديد تصميم المواد هذا إلى رفع قائمة تحديد HTML الشائعة إلى مستوى جديد تمامًا.

لا يعتمد على نمط المستند النموذجي لاختيار خيار. بدلاً من ذلك ، يستخدم هذا قائمة غير مرتبة مع معالجة jQuery للرسوم المتحركة وعملية التحديد. ويجب أن أقول ، هذا الشيء يبرز الأسلوب المادي.

الظلال المادية

تدفع Google بالظلال حقًا من أجل العمق في وثائقها المادية. هذا ما ستراه في هذا القلم حيث تتمتع جميع الدوائر بتأثيرات الظل المسقط المميزة الخاصة بها.

باستخدام الظلال ، يمكنك تعيين تسلسل هرمي لعناصر الصفحة بحيث يظهر بعضها في الأعلى والبعض الآخر أقل. إنها تخلق وهمًا بالمساحة على الشاشة وهو مفيد بشكل خاص على شاشات اللمس.

تأثير رائع جدًا وبالتأكيد شيء قد تنسخه في مشاريعك الخاصة.

واجهة مستخدم بطاقة الطقس

أنشأ المطور Thomas Vallez بطاقة الطقس الرائعة هذه التي تعمل على HTML و CSS خالص. يستخدم تأثير التلاشي البسيط على تحميل الصفحة ولكن الجمال الحقيقي هنا هو أسلوب تصميم المواد.

كل شيء من الألوان إلى الخطوط وحتى أيقونة الطقس ، كلها تعتمد على أنماط المواد الطبيعية.

يمكنك أن تأخذ هذا القالب وتستخدمه إلى حد كبير لأي نوع من تخطيط البطاقة. إنه أمر استثنائي وهو بالتأكيد أحد أكثر المشاريع مباشرة في هذه القائمة.

علامات تبويب المواد

هذا مشروع مثير للاهتمام يبني على فكرة علامات تبويب التصميم متعدد الأبعاد. أنشأ Michael Richins هذا القلم مع بعض جافا سكريبت الأساسي وبعض المعرفة بإرشادات تصميم Google.

تعمل علامات التبويب تمامًا كما تتوقع على أجهزة أخرى مماثلة مثل الهواتف الذكية أو الأجهزة اللوحية التي تعمل بنظام Android. ناهيك عن أن هذا الشيء يعمل على جافا سكريبت الفانيليا ، لذلك لا داعي للقلق بشأن jQuery أو أي من هذه الأشياء.

تأثير رائع إذا كنت تبحث عن علامات تبويب على موقعك. فقط تأكد من اختبار الأنماط لمعرفة ما إذا كانت تمتزج بشكل طبيعي مع صفحتك.

انقر فوق حركة الاستجابة

قام المطور Emmanuel Pilande ببناء تأثير الاستجابة الرائع هذا كطريقة بسيطة لتكرار تفاعلات المواد الدقيقة من Google.

انقر في أي مكان على بطاقات المواد لمشاهدة التأثير. ويمكنك تطبيق هذا على أي شيء تقريبًا من الأزرار إلى حاويات الصفحة أو حقول الإدخال.

إنه يعتمد على بعض JavaScript ، ولكن من السهل أيضًا إضافته إلى أي مشروع. لذلك إذا كنت تبحث عن مظهر المواد الطبيعية ، فهذا مقتطف رائع لحفظه.