UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。

白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック

CSS Tricks to Create that Dark Futuristic Web3 Look
by Trisha Lim

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

ダークモードのWeb3の美しさは、とてもクールで未来的な印象を与えます。そして、これらすべてにこの外観を実現するための共通のデザインがあります。The Graph, ARCx Money, Rabbithole, Sushi Swap, Buildspaceなどのデザインからインスピレーションを得て、あなたのWebサイトやスマホアプリに追加できるCSSのスタイルを紹介します。

  1. グラデーションの背景
  2. グローエフェクト
  3. ダークの背景にホワイトに輝くテキスト
  4. 半透明の背景
  5. ホバー時にすばやく簡単にトランジション

これらのスタイルをテキスト、ボタン、背景に適用する方法を解説します。

各デモはダークの背景にホワイトのテキストが表示されています。まずは、テキストから始めます。

かっこいいグラデーション使用したテキストのスタイル

デモのキャプチャ

実際のデモは、下記でご覧ください。

See the Pen
Web3 Styles: Text
by Trisha Lim (@trishalim)
on CodePen.

1. グローエフェクト

デモのキャプチャ

グローエフェクトはテキストを僅かに輝かせます。このエフェクトは見出しに使用したり、見出し内の特定の語句を強調するために使用したり、またリンクのホバーエフェクトとして使用することもできます。

The Graphはこのエフェクトを多用しています。ダークな背景にグローエフェクトのテキストは映えます。

サイトのキャプチャ

The Graph

2. グラデーションの背景エフェクト

デモのキャプチャ

Buildspaceでは、見出し内の語句を強調するためにこのエフェクトを使用しています。また、Rare Blocksでは、段落内の語句を強調するために使用しています。さらにフォントのウェイトを太くすることで、さらに目立たせています。

サイトのキャプチャ

Rare Blocks

3. グローエフェクトとグラデーションの組み合わせ

デモのキャプチャ

グラデーションを使用して、フレーズの中の特定の語句を強調します。CSSは前述の2つをそのまま使用できるので、HTMLでclassを与えるだけです。

かっこいいグラデーション使用したボタンのスタイル

デモのキャプチャ

実際のデモは、下記でご覧ください。

See the Pen
Web3 Styles: Buttons
by Trisha Lim (@trishalim)
on CodePen.

まず、使用するカラーを定義しましょう。私はパープルにしました。カラーは不透明度を変更して使用するため、rgbカラーで定義します。

まず、使用する色を定義しましょう。 私は紫に行きます。 これらは、後でさまざまな不透明度レベルで使用するRGBカラーです。

0. ボタンの基本スタイル

デモのキャプチャ

ボタンの基本的なスタイルを定義します。後でclassを追加して、異なるスタイルを定義します。

1. ホバーでグローエフェクト

デモのキャプチャ

transitionは必ず追加してください。0.3stransitionがあるだけで、大きな違いが生まれます。

2. 鮮やかな背景にホワイトの文字

デモのキャプチャ

これにもグローエフェクトを使用してみましょう。

3. 半透明の背景

デモのキャプチャ

ホバー時のカラーをほんの少しだけ明るくしてみます。繰り返しになりますが、これは小さな変更ですが、実際にはエクスペリエンスに大きな違いをもたらします。

グローエフェクトも与えてみましょう。

デモのキャプチャ

The Graphのランディングページで実際の動作をご覧ください。

サイトのキャプチャ

The Graph

4. グラデーションの背景

デモのキャプチャ

Sushi SwapBuildspaceなどのWeb3サイトでよく見られるボタンのスタイルです。

サイトのキャプチャ

Buildspace

5. グラデーションのボーダー

デモのキャプチャ

このスタイルはARCx MoneySushi Swapにインスパイアされました。

サイトのキャプチャ

Sushi Swap

かっこいいグラデーション使用した背景のスタイル

背景には、Unsplashからの銀河の画像を使用しました。

Milky Way Galaxy

Photo by Graham Holtshausen on Unsplash

この画像を使用して、Web3の外観を作る背景のスタイルを実装します。

デモのキャプチャ

実際のデモは、下記でご覧ください。

See the Pen
Web3 Styles: Background
by Trisha Lim (@trishalim)
on CodePen.

まず、シンプルなカードを実装します。

.cardのスタイルはposition: relative;を除いて、自由にしてください。

それでは、画像を背景として追加します。

次に、filterプロパティを使用して画像をぼかしてグラデーションを作成します。

画像を元にしたグラデーションの完成です。

デモのキャプチャ

左: シンプルなカード、右: 画像を元にしたグラデーション

同じような効果を得るのに画像は必要ありません。Buildspaceではグラデーションの背景を使用して実現しています。

サイトのキャプチャ

Buildspace

しかし、画像であれば、ダイナミックなカラーを表現できます。The Graphではロゴにぼかしを加え、それをカードの背景にして、その上にロゴを配置しています。

サイトのキャプチャ

The Graph

Rabbitholeもこの効果を使用して、ヒーローの背景色を画像と合わせています。背景にウサギがぼかされている画像を使用しているのが分かります。

サイトのキャプチャ

Rabbithole

これで終わりです。
あなたも次のプロジェクトにこの美しいスタイルを取り入れることができます。実際のデモは、下記をご覧ください。

この記事を楽しんだり、何か得ることがあることを願っています。私のことを知りたい方は、https://trishalim.com/をご覧ください。

最後に、ARCxの美しさを残しておきます 😉

サイトのキャプチャ

ARCx's passport designs

sponsors

top of page

©2022 coliss