ITエンジニア/デザイナ向けにオープンソースを毎日紹介

マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。

そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントです。

Matterの使い方

デモです。ボタンやチェックボックスなど様々なコンポーネントが並んでいます。

テキストフィールドについても様々なデザインが用意されています。

色を動的に変更できます。

ダークモードっぽい仕上げも。

MatterはCSSだけで作られているのが魅力です。様々なWebサイトの中で利用できるでしょう。CSSだけで実装されていれば、参考になる部分も多そうです。自分のサイトにそのまま組み込んだり、Matterを参考にマテリアルデザインを取り込むこともできるでしょう。

MatterはCSS製のオープンソース・ソフトウェア(MIT License)です。

CodePen - Pure CSS Material Components Showcase

finnhvman/matter: Material Components in Pure CSS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2