Crafting on the web
「ウェブで“工芸”をする」by 新田聡一郎

Last edited: May 19, 2024

Ripple Gradient

CSS一行で、波紋が広がる模様を作ってみました。手軽に実装できるシンプルなギミックです。

Ripple Gradient

May 2024

水面に雫が落ちて、波紋が広がるような背景 🌊
下記のスタイルを1つ追加するだけで手軽に実装が可能です。ヒーロー部分等で使用すれば、サイト全体をモダンな印象に引き締めてくれるでしょう。是非、コピー&ペーストしてお試しください。

backgroundImage: 'linear-gradient(rgba(0,0,0,0.2) 0%, rgb(15,15,15) 80%), repeating-radial-gradient(circle at 50% 50%, rgb(45,45,45) 0, rgb(30,30,30) 32px)',
Copied

上記のように、linear-gradient(線形のグラデーション)とrepeating-radial-gradient(放射状のグラデーション)の2つを組み合わせている形です。

まずはlinear-gradientです 👇

linear-gradient
backgroundImage: 'linear-gradient(rgba(0,0,0,0.2) 0%, rgb(80,80,255) 80%)',
Copied

rgba(0,0,0,0.2)から、青rgb(80,80,255)に向かって、上から80%の位置までグラデーションさせています。 (上から80% ~ 100%の範囲は、青rgb(80,80,255)で塗り潰されています)

次にrepeating-radial-gradientです 👇

repeating-radial-gradient
backgroundImage: 'repeating-radial-gradient(circle at 50% 50%, rgb(80,80,255) 0px, rgba(40,40,123) 32px)',
Copied

円の基点をcircle at 50% 50%として要素の中央に指定しており、 明るい青rgb(80,80,255)から、暗い青rgba(40,40,123)に向かってグラデーションさせています。中央から32pxずつ円が繰り返し表示されている形です。

そして、この2枚を重ねると 👇

Ripple Gradient

完成です。お好みで色やグラデーションの値を変更して、自分だけの波紋を作ってみてください!

まるで工芸品のようなクラフト型コンテンツ

プロダクトの魅力を伝えるための、機能的なウェブコンテンツを発信しませんか?
CMSやマークダウンを用いた、従来の単なるテキストによる記事型コンテンツではなく、技術者が直接コードを書いて執筆することで、より顧客と積極的に関わり合いを持てるようなデジタル体験を提供することが可能です。

あなたのサイトをもっと魅力的にみせるお手伝いが出来るかもしれません。メディアサイト制作、ウェブコンテンツ制作をご希望の企業様は、お気軽にお問い合わせください。

hello@nitta.studio

新しいタブで開くよ