10の有用なマテリアルデザインコードスニペット

公開: 2020-10-24

マテリアルデザインの流行は、ウェブの世界を席巻しています。毎月、フレームワークまたはカスタムUIキットを使用してマテリアルスタイルで実行されている新しいサイトを見つけます。

しかし、これは悪いことではなく、まったく逆です！これは、Googleが独自の推奨デザイン言語として認識している実証済みのトレンドを利用して、デザインプロセスを簡素化する方法です。

マテリアルデザインスタイルに精通している場合は、これらのコードスニペットが最適です。これらは、さまざまなデザインとコンポーネントを選択できる私のお気に入りの10個にすぎません。

レスポンシブテーブル

これは、独自のひねりを加えたマテリアルデザインスニペットです。 Sergey Kupletskyによって作成されたこのレスポンシブテーブルは、実際にはマテリアルデザインスニペットへの他のリンクをホストしています。かなりクール！

これは、マテリアルデザイン手法を使用して自然に作成されるため、テーブルは独自のレイアウトに完全に適合する必要があります。しかし、モバイルデザインの最も難しい部分は、小さな画面で機能するテーブルを作成することです。

この方法は、それを処理するための最良の方法の1つだと思います。また、コードはクリーンに保たれるため、テーブルのサイズに関係なく、コーディング、クリーンアップ、および管理が非常に簡単になります。

カードUIの移行

開発者のIvanVillamilは、この非常にユニークなカードUIデザインを、かなりクレイジーなアニメーションで作成しました。

ページを見て、カードのいずれかをクリックしてみてください。カードの内容がコンテナ上でアニメーション化されて表示される、ユニークなアニメーション効果が得られます。これは、モバイルアプリで見つかると期待されるもののようですが、Webに移植されています。

アニメーション効果は完璧であり、今日のWebでどれだけのことができるかを示しています。言うまでもなく、このコンボWeb /モバイルUIには、素材のスタイルがぴったりです。

コンパクトログイン

私はデザイナーとしての長年にわたって、いくつかの非常にクールなログインフォームを見てきました。しかし、このクレイジーなデザインは、そのインタラクティブな機能とユニークなスタイルにぴったりかもしれません。

右上隅にある明るいピンクのアイコンをクリックすると、ページの上に表示される登録フィールドが表示されます。それはかなりユニークで、本当に使いやすいインターフェースを作成します。

それで、キャッチは何ですか？これは多くのJavaScriptを使用するため、コード的には最も適切なソリューションではありません。しかし、それでもコンパクトな機能を使用した設計の優れた例です。

アニメーションを作成する

Scott Kellumは、ページが読み込まれると自動入力されるこの興味深いマテリアルカードレイアウトを開発しました。これはグリッドで展開され、各カードにカーソルを合わせると、マテリアルデザイン機能の動作を確認できます。

これが直接のプロジェクトでどれほど役立つか、またはそれからどれだけ得られるかは言えません。しかし、これはWebのオフグリッドデザインを示す楽しいスニペットであり、ホバーアニメーションと素材のフレーバーのタッチを混ぜ合わせています。

素材BS4ボタン

オンラインで入手できる多くのBootstrapテンプレートの中で、それらのいくつかがマテリアルデザインを使用していると信じている方がよいでしょう。そして、このペンは、Bootstrap4のマテリアルデザインで実行できるすべてのクールな機能を紹介しています。

実際、これはGoogleの素材言語にリスタイルされたボタンのコレクションにすぎません。ただし、すべて最新のBS4フレームワークで実行されるため、これらをBootstrapを利用したページに追加できます。

Bootstrapに真剣に取り組んでいる場合は、最新のリリースを見て、自分の考えを確認してください。それはあらゆるものの基盤として素晴らしい働きをします、そしてそれは特に物質的なサイトに当てはまります。

マテリアルデザイン選択メニュー

ドロップダウン選択メニューは、フォームデザインの定番です。ユーザーは、州、国、言語などの関連トピックに関するいくつかの回答から選択できます。

このマテリアルデザインの選択により、一般的なHTML選択メニューがまったく新しいレベルに引き上げられます。

オプションを選択するために、一般的なドキュメントスタイルに依存しません。代わりに、これは、アニメーションと選択プロセスを処理するjQueryで順序付けされていないリストを使用します。そして、私が言わなければならないのは、このことは素材のスタイルを釘付けにすることです。

マテリアルシャドウ

グーグルは彼らの資料文書の深さのために本当に影を押します。これがこのペンに表示されるもので、すべての円に独自のドロップシャドウ効果があります。

影を使用すると、ページ要素に階層を指定して、一部が上に表示され、他が下に表示されるようにすることができます。これは、タッチスクリーンで特に役立つ画面上のスペースの錯覚を作成します。

かなりクールな効果であり、確かにあなたがあなた自身のプロジェクトでコピーするかもしれない何か。

ウェザーカードUI

開発者のThomasVallezは、純粋なHTMLとCSSで実行されるこの素晴らしい天気カードを作成しました。ページロードでシンプルなフェードイン効果を使用しますが、ここでの本当の美しさはマテリアルデザインスタイルです。

色からフォント、さらには天気アイコンまで、すべて自然素材のスタイルに依存しています。

このテンプレートを使用して、ほぼすべてのタイプのカードレイアウトに使用できます。これは驚異的であり、確かにこのリストの中で最も単純なプロジェクトの1つです。

材料タブ

これは、マテリアルデザインタブのアイデアに基づいた興味深いプロジェクトです。 Michael Richinsは、基本的なJavaScriptとGoogleの設計ガイドラインに関する知識を使用してこのペンを作成しました。

タブは、Androidスマートフォンやタブレットなどの他の同様のデバイスで期待するのと同じように機能します。言うまでもなく、これは単純なバニラJavaScriptで実行されるため、jQueryなどについて心配する必要はありません。

あなたがあなたのサイトでタブを探しているなら、かなりクールな効果。スタイルをテストして、ページと自然に調和するかどうかを確認してください。

[応答アニメーション]をクリックします

開発者のEmmanuelPilandeは、Googleのマテリアルなマイクロインタラクションを複製する簡単な方法として、このクールなレスポンス効果を構築しました。

マテリアルカードの任意の場所をクリックして、効果を確認します。そして、これはボタンからページコンテナや入力フィールドまでほとんどすべてに適用できます。

JavaScriptに依存していますが、プロジェクトに追加するのも簡単です。したがって、そのau naturaleマテリアルの外観を求める場合、これは保存するのに最適なスニペットです。