Webサイトやスマホアプリでよく見かけるボタンやカード、フォーム、ローディングなど、UIコンポーネントやUI要素を実装するCSSのコード、Tailwind CSSのコード、さらにはReactのコードをまとめたCSSnippetsを紹介します。
これ使うかもと思ったCSSは、自分のスニペットに保存しておくと便利ですね。
CSSnippets
CSSnippetsは、Webサイトやスマホアプリでよく見かける270種類以上のUIコンポーネントとUI要素を実装するCSSスニペットのコレクションです。
コードは、主に3種類用意されています。
CSSは必ずありますが、Tailwind CSSとReactはすべてではありません。
CSSnippets
利用方法は、簡単です。
UIコンポーネントとUI要素はカテゴリごとに分けられており、まずはボタンを実装するコードを見てみます。
Buttons -CSSnippets
各デモの下部に「CSS」と「Tailwind」のボタンがあるので、それぞれをクリックするとコードが表示されます。まずは「CSS」のボタンをクリックしてみます。
ボタンを実装するCSSのスニペット
「Tailwind」をクリックすると、Tailwind CSSのコードが表示されます。
ボタンを実装するTailwind CSSのスニペット
CSSnippetsには、270種類以上のUIコンポーネントとUI要素を実装するコードが、12個のカテゴリにまとめられています。
Cards -CSSnippets
box-shadow
によるシャドウも実際のシャドウを確認できるので、便利ですね。
Box Shadows -CSSnippets
フォーム関連のスニペットには、「React」のコードも用意されています。
Forms -CSSnippets
ハンバーガーメニューもタップしてクローズの×になるさまざまなアニメーションがあります。
Hamburgers -CSSnippets
ローディングもさまざまなアニメーションが揃っており、画像を使用せずに実装できます。
Loading Spinners -CSSnippets
テキストのアニメーションもたくさん揃っており、すべてCSSアニメーションで実装されています。HTMLのコードからデモのコードを変更できたらいいのにな、と思いました。
Text Animations -CSSnippets