CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック

WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。

このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。

Using easing for more than just CSS transitions
by Kilian Valkhof

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

• はじめに
• アニメーションとトランジションに組み込まれているイージング
• グラデーションをCSSでより美しく実装するテクニック
• シャドウをCSSでより美しく実装するテクニック
• 見栄えのよいWebサイトを制作する

はじめに

アニメーションの実装にイージング曲線を使用して、より繊細で自然な動きを与えることができます。しかし、このイージング曲線のメリットがあるのはアニメーションだけではありません。2点の間に移行があるものはすべてイージング曲線を使うことで、より自然になります。

アニメーションとトランジションでは、イージング曲線がCSSに組み込まれています。そして、このイージング曲線を使用すると他のUI要素、グラデーションやシャドウにも効果が得られます。イージング曲線のように自然な移行で実装するグラデーションとシャドウのテクニックを紹介します。

アニメーションとトランジションに組み込まれているイージング

最初は、アニメーションにイージング曲線がある理由を簡単に説明します。
Webサイトにアニメーションやトランジションを追加する時、通常はより自然な感じにするために線形ではなく、イージング曲線を使用します。線形遷移はすぐにフルスピードで始まり、そのままフルスピードで動き、突然終了します。この動きはリアルの世界には存在しません。物を落としても全速力で落ちることはなく、車のアクセルを踏んでもその速度に達するまで加速します。これらは「加速度曲線」と呼ばれるもので、CSSではイージングと呼ばれます。

アニメーションやトランジションにイージング曲線を使用すると、ある意味「リアル」を感じさせることができます。これが何を意味するのか理解するには、cubic-bezierでさまざまな曲線を試して、線形遷移と比較してみてください。

cubic-bezier

2020年現在、グラデーションもボックスシャドウもCSSでイージング曲線を定義することはできませんが、同様の効果を得るテクニックがあります。

グラデーションをCSSでより美しく実装するテクニック

線形遷移が雑に見えるのと同じように、線形グラデーションも雑に見えます。特にエッジではグラデーションが突然終了したように見えることがよくあります。残念ながら、通常のCSSで実装できるのは線形グラデーションだけで、2色の間で直線的にのみ遷移できます。つまり、グラデーションが突然終了したり、むらがあるように感じることがあります。

この問題を解決するには、Andreas Larsenによる「concept of easing gradients」が役立ちます。同じタイプのカーブを使用して、2色の間で移行させます。その違いは非常に顕著です。

左: 線形グラデーション、右: イージングのグラデーション

これが機能する方法は、実際のイージング曲線ではなく、定義されたステップ数で色が何になるかを計算することで曲線を近似させるというものです。複数のステップによって、イージング曲線の効果が得られます。詳細については「concept of easing gradients」をご覧ください。

線形グラデーションとイージングのグラデーションのCSSは、下記の通りです。

Polypaneにあるすべてのグラーデションは、PostCSS Easing Gradientsでイージングのグラデーションが実装されており、色間のより自然な遷移を提供しています。

Polypane

このテクニックは現在、CSS-WGの提案にあがっていますが、ブラウザに直接実装されることになるかどうかは分かりません。

シャドウをCSSでより美しく実装するテクニック

広い目で見ると、シャドウは一種のグラデーションです。Webページにシャドウを実装する時のbox-shadowは、グラデーションに似ています。グラデーションのような線形遷移は使用せず、ガウスぼかしを使用すると少しよく見えますが、見栄えはよくありません。リアルの世界に存在するシャドウは、より繊細に変化する傾向があります。オブジェクトの近くではより暗く、曲線にそってフェードアウトします。

box-shadowでイージング曲線を定義することはできませんが、複数のシャドウで曲線のステップを作成することができます。この違いはかなり大きいです。
実際に見て、比べてください。

左: 線形シャドウ、右: イージングのシャドウ

線形シャドウとイージングのシャドウのCSSは、下記の通りです。

このテクニックは「スムーズシャドウ」あるいは「レイヤーシャドウ」と呼ばれ、イージングの別形態です。詳細については「Smoother & sharper shadows with layered box-shadows」をご覧ください。

Smoother & sharper shadows with layered box-shadows

また、このテクニックを使用したオンラインツールもあり、美しいシャドウのCSSがコピペで利用できます。

Make a smooth shadow

残念ながら、PostCSSのプラグインはまだないので、私は手動でボックスシャドウを作成し、制作に使用しています。もし、あなたがプラグインを構築しようと考えるのであれば、大変ありがたいことです！

見栄えのよいWebサイトを制作する

グラデーションとシャドウにイージング曲線を使用すると、グラーデションとシャドウ自体に影響を与えることなく、より繊細で自然な外観になります。グラデーションはカラー1からカラー2に自然に変化し、シャドウは同じピクセル量で自然に広がり、2点間の移行ははるかに美しくなります。

最後に、線形アニメーションに正当な用途があるのと同様に、すべてのインスタンスで機能するわけではありません。しかし、あなたの引き出しに素晴らしいテクニックが加わると思います。