UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック
Post on:2021年12月2日
sponsorsr
近未来的なかっこいい印象を与えるグラデーションを使用した、テキスト・ボタン・背景のスタイルを実装するCSSのテクニックを紹介します。
白地のテキストをわずかに輝かせたり、ダークモードに映えるグラデーションでテキストやボタンを目立たせたり、カードに美しいグラデーションの背景を実装したり、少し色味を変えてライトモードに使用してもかっこいいグラデーションです。
CSS Tricks to Create that Dark Futuristic Web3 Look
by Trisha Lim
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
ダークモードのWeb3の美しさは、とてもクールで未来的な印象を与えます。そして、これらすべてにこの外観を実現するための共通のデザインがあります。The Graph, ARCx Money, Rabbithole, Sushi Swap, Buildspaceなどのデザインからインスピレーションを得て、あなたのWebサイトやスマホアプリに追加できるCSSのスタイルを紹介します。
- グラデーションの背景
- グローエフェクト
- ダークの背景にホワイトに輝くテキスト
- 半透明の背景
- ホバー時にすばやく簡単にトランジション
これらのスタイルをテキスト、ボタン、背景に適用する方法を解説します。
各デモはダークの背景にホワイトのテキストが表示されています。まずは、テキストから始めます。
かっこいいグラデーション使用したテキストのスタイル
実際のデモは、下記でご覧ください。
See the Pen
Web3 Styles: Text by Trisha Lim (@trishalim)
on CodePen.
1. グローエフェクト
グローエフェクトはテキストを僅かに輝かせます。このエフェクトは見出しに使用したり、見出し内の特定の語句を強調するために使用したり、またリンクのホバーエフェクトとして使用することもできます。
|
1 |
<h1 class="text-glow">text glow effect</h1> |
|
1 2 3 |
.text-glow { text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%); } |
The Graphはこのエフェクトを多用しています。ダークな背景にグローエフェクトのテキストは映えます。
2. グラデーションの背景エフェクト
|
1 |
<h1><span class="text-gradient">text gradient effect</span></h1> |
|
1 2 3 4 5 |
.text-gradient { background: linear-gradient(to right, #30CFD0, #c43ad6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Buildspaceでは、見出し内の語句を強調するためにこのエフェクトを使用しています。また、Rare Blocksでは、段落内の語句を強調するために使用しています。さらにフォントのウェイトを太くすることで、さらに目立たせています。
3. グローエフェクトとグラデーションの組み合わせ
グラデーションを使用して、フレーズの中の特定の語句を強調します。CSSは前述の2つをそのまま使用できるので、HTMLでclassを与えるだけです。
|
1 2 3 4 |
<h1 class="text-glow"> <span class="text-gradient">text gradient</span> with glow effect </h1> |
かっこいいグラデーション使用したボタンのスタイル
実際のデモは、下記でご覧ください。
See the Pen
Web3 Styles: Buttons by Trisha Lim (@trishalim)
on CodePen.
まず、使用するカラーを定義しましょう。私はパープルにしました。カラーは不透明度を変更して使用するため、rgbカラーで定義します。
まず、使用する色を定義しましょう。 私は紫に行きます。 これらは、後でさまざまな不透明度レベルで使用するRGBカラーです。
|
1 2 3 4 5 6 7 |
:root { /* violet */ --primary-color: 111, 76, 255; /* white */ --text-color: 256, 256, 256; } |
0. ボタンの基本スタイル
ボタンの基本的なスタイルを定義します。後でclassを追加して、異なるスタイルを定義します。
|
1 |
<button class="btn">Button</button> |
|
1 2 3 4 5 6 7 8 9 10 |
.btn { font-family: sans-serif; font-size: 18px; padding: 12px 32px; margin: 1rem; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; border-radius: 50px; } |
1. ホバーでグローエフェクト
|
1 |
<button class="btn btn-glow">Glow on Hover</button> |
|
1 2 3 |
.btn-glow:hover { box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px; } |
transitionは必ず追加してください。0.3sのtransitionがあるだけで、大きな違いが生まれます。
|
1 2 3 4 5 6 7 |
.btn { transition: all 0.3s ease; } .btn:hover { transition: all 0.3s ease; } |
2. 鮮やかな背景にホワイトの文字
これにもグローエフェクトを使用してみましょう。
|
1 |
<button class="btn btn-glow btn-primary">Primary Button</button> |
|
1 2 3 4 5 |
.btn-primary { background-color: rgb(var(--primary-color)); border: 1px solid rgb(var(--primary-color)); color: rgb(var(--text-color)); } |
3. 半透明の背景
|
1 2 3 4 5 |
.btn-semi-transparent { background-color: rgba(var(--primary-color), 0.15); border: 1px solid rgba(var(--primary-color), 0.25); color: rgba(var(--text-color), 0.8); } |
ホバー時のカラーをほんの少しだけ明るくしてみます。繰り返しになりますが、これは小さな変更ですが、実際にはエクスペリエンスに大きな違いをもたらします。
|
1 2 3 4 5 |
.btn-semi-transparent:hover { background-color: rgba(var(--primary-color), 0.35); border: 1px solid rgba(var(--primary-color), 0.5); color: rgba(var(--text-color), 0.9); } |
グローエフェクトも与えてみましょう。
|
1 |
<button class="btn btn-semi-transparent btn-glow">Semi Transparent Button</button> |
The Graphのランディングページで実際の動作をご覧ください。
4. グラデーションの背景
|
1 |
<button class="btn btn-gradient btn-glow">Gradient Button</button> |
|
1 2 3 4 5 |
.btn-gradient { background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167)); border: 0; color: rgba(var(--text-color)); } |
Sushi SwapやBuildspaceなどのWeb3サイトでよく見られるボタンのスタイルです。
5. グラデーションのボーダー
|
1 2 3 |
<button class="btn btn-gradient-border btn-glow"> Gradient Border Button </button> |
|
1 2 3 4 5 6 7 |
.btn-gradient-border { color: rgb(var(--text-color)); border: 2px double transparent; background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192)); background-origin: border-box; background-clip: padding-box, border-box; } |
このスタイルはARCx MoneyとSushi Swapにインスパイアされました。
かっこいいグラデーション使用した背景のスタイル
背景には、Unsplashからの銀河の画像を使用しました。
Photo by Graham Holtshausen on Unsplash
この画像を使用して、Web3の外観を作る背景のスタイルを実装します。
実際のデモは、下記でご覧ください。
See the Pen
Web3 Styles: Background by Trisha Lim (@trishalim)
on CodePen.
まず、シンプルなカードを実装します。
|
1 2 3 |
<div class="card"> <h1>Some text here</h1> </div> |
.cardのスタイルはposition: relative;を除いて、自由にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.card { margin: 1rem; padding: 1rem; height: 300px; width: 300px; text-align: center; color: white; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 10px; } |
それでは、画像を背景として追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.bg-blur { overflow: hidden; } .bg-blur::before { content: ''; background-image: var(--bg-image); background-size: cover; height: 100%; width: 100%; position: absolute; z-index: -1; } |
次に、filterプロパティを使用して画像をぼかしてグラデーションを作成します。
|
1 2 3 |
.bg-blur::before { filter: blur(30px); } |
画像を元にしたグラデーションの完成です。
左: シンプルなカード、右: 画像を元にしたグラデーション
同じような効果を得るのに画像は必要ありません。Buildspaceではグラデーションの背景を使用して実現しています。
しかし、画像であれば、ダイナミックなカラーを表現できます。The Graphではロゴにぼかしを加え、それをカードの背景にして、その上にロゴを配置しています。
Rabbitholeもこの効果を使用して、ヒーローの背景色を画像と合わせています。背景にウサギがぼかされている画像を使用しているのが分かります。
これで終わりです。
あなたも次のプロジェクトにこの美しいスタイルを取り入れることができます。実際のデモは、下記をご覧ください。
この記事を楽しんだり、何か得ることがあることを願っています。私のことを知りたい方は、https://trishalim.com/をご覧ください。
最後に、ARCxの美しさを残しておきます 😉
sponsors
