10 個有用的 Material Design 代碼片段

材料設計熱潮正在席捲網絡世界。 每個月我都會發現使用框架或自定義 UI 工具包以 Material 風格運行的新網站。

但這並不是一件壞事，恰恰相反！ 這是一種通過使用 Google 認可為他們自己的首選設計語言的成熟趨勢來簡化您的設計過程的方法。

如果您對材料設計風格很感興趣，那麼這些代碼片段適合您。 這些只是我最喜歡的 10 個，它們提供了多種設計和組件供您挑選。

響應表

這是一個具有獨特轉折的材料設計片段。 這個由 Sergey Kupletsky 創建的響應式表格實際上包含了其他指向材料設計片段的鏈接。 很酷！

這也是使用材料設計技術自然創建的，因此表格應該完全適合您自己的佈局。 但移動設計中最困難的部分是製作在較小屏幕上工作的桌子。

我認為這種方法是處理它的最佳方法之一。 您的代碼也保持乾淨，這使得無論您的表格大小如何，編碼、清理和管理都非常容易。

卡片 UI 轉換

開發人員 Ivan Villamil 用一些非常瘋狂的動畫構建了這個非常獨特的卡片 UI 設計。

查看頁面並嘗試單擊任何卡片。 您將獲得獨特的動畫效果，其中卡片內容在容器上動畫並出現在視圖中。 這就像您希望在移動應用程序中找到的東西，但移植到網絡上！

動畫效果完美無瑕，它們顯示了您今天可以在網絡上做多少事情。 更不用說這個組合的網絡/移動用戶界面的材質風格是正確的。

緊湊型登錄

在我作為設計師的這些年裡，我見過一些非常酷的登錄表單。 但這種瘋狂的設計可能會因其互動功能和獨特的風格而大受歡迎。

當您單擊右上角的亮粉色圖標時，您將獲得一個顯示在頁面上方的註冊字段。 它非常獨特，它創建了一個真正可用的界面。

那麼有什麼問題呢？ 這確實使用了大量的 JavaScript，所以它不是最簡潔的代碼解決方案。 但仍然是具有緊湊功能的設計的一個很好的例子。

填充動畫

Scott Kellum 開發了這種有趣的材料卡片佈局，一旦頁面加載就會自動填充。 這在一個網格中發展，您可以將每張卡片懸停在其中以查看實際的材料設計功能。

我不能說這在直接項目中有多大用處，或者你能從中得到多少。 但這是一個有趣的片段，展示了 Web 的離網設計，混合了一些材料風味和懸停動畫。

材質 BS4 鈕扣

在網上提供的許多 Bootstrap 模板中，您最好相信其中一些使用材料設計。 這支筆展示了您可以在 Bootstrap 4 中使用材料設計做的所有很酷的事情。

實際上，這只是一組重新設計為 Google 材料語言的按鈕。 但這一切都在最新的 BS4 框架上運行，因此您可以將它們添加到任何 Bootstrap 支持的頁面。

如果您對 Bootstrap 很認真，請查看最新版本以了解您的想法。 它可以很好地作為任何事物的基礎，對於物質網站尤其如此。

材料設計選擇菜單

下拉選擇菜單是表單設計的主要內容。 他們讓用戶從有關州、國家、語言等相關主題的少數答案中進行選擇。

這種材料設計選擇將常見的 HTML 選擇菜單提升到了一個全新的水平。

它不依賴於典型的文檔樣式來選擇一個選項。 相反，它使用了一個無序列表，jQuery 處理動畫和選擇過程。 我不得不說，這東西釘在了物質風格上。

材質陰影

谷歌真的在他們的材料文檔中推動了陰影的深度。 這就是您將在這支筆中看到的，其中的圓圈都有自己獨特的陰影效果。

使用陰影，您可以為頁面元素指定層次結構，以便一些出現在頂部，另一些出現在較低的位置。 它會在屏幕上產生一種空間錯覺，這在觸摸屏上特別有用。

一個非常酷的效果，當然你可以在自己的項目中復制一些東西。

天氣卡用戶界面

開發人員 Thomas Vallez 創建了這個在純 HTML 和 CSS 上運行的很棒的天氣卡。 它在頁面加載時使用了簡單的淡入效果，但這裡真正的美是材料設計風格。

從顏色到字體，甚至天氣圖標，一切都依賴於自然材質樣式。

您可以使用此模板並將其用於幾乎任何類型的卡片佈局。 這是非凡的，當然也是此列表中更直接的項目之一。

材料選項卡

這是一個有趣的項目，它建立在材料設計選項卡的概念之上。 Michael Richins 使用一些基本的 JavaScript 和一些 Google 設計指南的知識創建了這支筆。

這些標籤的工作方式與您在其他類似設備（如 Android 智能手機或平板電腦）上所期望的一樣。 更不用說這個東西是在普通的 JavaScript上運行的，所以你永遠不需要擔心 jQuery 或任何類似的東西。

如果您正在尋找網站上的標籤，這是一個非常酷的效果。 只需確保您測試樣式以查看它們是否與您的頁面自然融合。

點擊響應動畫

開發人員 Emmanuel Pilande 構建了這種很酷的響應效果，作為複制 Google 材料微交互的簡單方法。

單擊材料卡上的任意位置以查看效果。 您可以將其應用於幾乎任何東西，從按鈕到頁面容器或輸入字段。

它確實依賴於一些 JavaScript，但添加到任何項目中也很簡單。 因此，如果您想要那種au naturale材質的外觀，這是一個很好的保存片段。