TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ

デザインは奥が深いですね。
Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。

サイトのキャプチャ

The “🔥 Design Tips” series, now in TailwindCSS

ベースに使用するのは「TailwindCSS」で、さまざまなコンポーネントやエレメントをカスタマイズできるスタイルをまとめたユーティリティファーストのCSSフレームワークです。

サイトのキャプチャ

TailwindCSS

TailwindCSSについては、以前の記事をご覧ください。

このTailwindCSSを使用して、Steve Schoger氏🔥 Design Tipsを実装したのが今回紹介するCSSのデモです。デモには最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

サイトのキャプチャ

デモページ

異なるサイズのテキストを同じウェイトに見せるには、大きいテキストを細くし、小さいテキストを太くします。

サイトのキャプチャ

デモページ

ドロップダウンは単なるリンクのリストではありません。ボックスを使用して、あなたは自由にデザインすることができます。

サイトのキャプチャ

デモページ

ランディングページに小さなアイコンを表示するのではなく、背後に図形を配置して背景色を加えてみましょう。

サイトのキャプチャ

デモページ

標準の箇条書き記号の代わりに矢印やチェックマークのようなアイコンを使用すると、リストに視覚的な効果を与えることができます。

サイトのキャプチャ

デモページ

テキストよりもウェイトがあるアイコンを使用している場合、通常は非アクティブ状態のテキストよりもアイコンを少し明るくします。

サイトのキャプチャ

デモページ

ボーダーや区切り線が多すぎると、デザインが込み入って見えます。これを改善する素敵なアイデアがいくつかあります。

サイトのキャプチャ

デモページ

テキストを強調または強調しないためには、フォントサイズが最適な方法とは限りません。その代わりに、カラーとフォントのウェイトを変更してみてください。

サイトのキャプチャ

デモページ

2カラムのレイアウトは長いフォームを整理したり、不格好な長いフォームフィールドを使用せずに広い画面に入力したりするのに適しています。

サイトのキャプチャ

デモページ

カラーの背景に白いテキストを使用する場合、アクセシブルなコントラスト比を調整するのは非常に困難です。柔らかい色の背景に濃い色のテキストを使用すると、アクセシブルになり、見た目も向上します。

sponsors

top of page

©2024 coliss