on:2020年1月17日sponsorsWebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。Valkhof下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにアニメーションとトランジションに組み込まれているイージンググラデーションをCSSでより美しく実装するテクニックシャドウをCSSでより美しく実装するテクニック見栄えのよいWebサイトを制作するはじめにアニメーションの実装にイージング曲線を使用して、より繊細で自然な動きを与えることができます。このイージング曲線のメリットがあるのはアニメーションだけではありません。2点の間に移行があるものはすべてイージング曲線を使うことで、より自然になります。アニメーションとトランジションでは、イージング曲線がCSSに組み込まれています。このイージング曲線を使用すると他のUI要素、グラデーションやシャドウにも効果が得られます。イージング曲線のように自然な移行で実装するグラデーションとシャドウのテクニックを紹介します。アニメーションとトランジションに組み込まれているイージング最初は、アニメーションにイージング曲線がある理由を簡単に説明します。Webサイトにアニメーションやトランジションを追加する時、通常はより自然な感じにするために線形ではなく、イージング曲線を使用します。線形遷移はすぐにフルスピードで始まり、そのままフルスピードで動き、突然終了します。この動きはリアルの世界には存在しません。物を落としても全速力で落ちることはなく、車のアクセルを踏んでもその速度に達するまで加速します。これらは「加速度曲線」と呼ばれるもので、CSSではイージングと呼ばれます。アニメーションやトランジションにイージング曲線を使用すると、ある意味「リアル」を感じさせることができます。これが何を意味するのか理解するには、cubic-bezierでさまざまな曲線を試して、線形遷移と比較してみてください。cubic-bezier2020年現在、グラデーションもボックスシャドウもCSSでイージング曲線を定義することはできませんが、同様の効果を得るテクニックがあります。グラデーションをCSSでより美しく実装するテクニック線形遷移が雑に見えるのと同じように、線形グラデーションも雑に見えます。エッジではグラデーションが突然終了したように見えることがよくあります。残念ながら、通常のCSSで実装できるのは線形グラデーションだけで、2色の間で直線的にのみ遷移できます。グラデーションが突然終了したり、むらがあるように感じることがあります。gradients」が役立ちます。同じタイプのカーブを使用して、2色の間で移行させます。その違いは非常に顕著です。イージングのグラデーションこれが機能する方法は、実際のイージング曲線ではなく、定義されたステップ数で色が何になるかを計算することで曲線を近似させるというものです。複数のステップによって、イージング曲線の効果が得られます。gradients」をご覧ください。線形グラデーションとイージングのグラデーションのCSSは、下記の通りです。Gradientsでイージングのグラデーションが実装されており、色間のより自然な遷移を提供しています。Polypaneこのテクニックは現在、CSS-WGの提案にあがっていますが、ブラウザに直接実装されることになるかどうかは分かりません。シャドウをCSSでより美しく実装するテクニック広い目で見ると、シャドウは一種のグラデーションです。Webページにシャドウを実装する時のbox-shadowは、グラデーションに似ています。グラデーションのような線形遷移は使用せず、ガウスぼかしを使用すると少しよく見えますが、見栄えはよくありません。リアルの世界に存在するシャドウは、より繊細に変化する傾向があります。オブジェクトの近くではより暗く、曲線にそってフェードアウトします。box-shadowでイージング曲線を定義することはできませんが、複数のシャドウで曲線のステップを作成することができます。この違いはかなり大きいです。実際に見て、比べてください。イージングのシャドウ線形シャドウとイージングのシャドウのCSSは、下記の通りです。rgba(0,0,0,.07)}このテクニックは「スムーズシャドウ」あるいは「レイヤーシャドウ」と呼ばれ、イージングの別形態です。box-shadows」をご覧ください。box-shadowsまた、このテクニックを使用したオンラインツールもあり、美しいシャドウのCSSがコピペで利用できます。shadow残念ながら、PostCSSのプラグインはまだないので、私は手動でボックスシャドウを作成し、制作に使用しています。あなたがプラグインを構築しようと考えるのであれば、大変ありがたいことです!見栄えのよいWebサイトを制作するグラデーションとシャドウにイージング曲線を使用すると、グラーデションとシャドウ自体に影響を与えることなく、より繊細で自然な外観になります。グラデーションはカラー1からカラー2に自然に変化し、シャドウは同じピクセル量で自然に広がり、2点間の移行ははるかに美しくなります。最後に、線形アニメーションに正当な用途があるのと同様に、すべてのインスタンスで機能するわけではありません。あなたの引き出しに素晴らしいテクニックが加わると思います。