<!DOCTYPE LNLY>

ノールック寿司グリップ🍣

CSSで作るグラデーションを美しくする一手間

素晴らしい記事*1を見つけて真似してみたら地味なポイントだけどグッと見栄えがよくなりましたので、ぜひ試して欲しいな。

いつ使うのか

このテクニックが最も有効に効果を発揮するのは、写真の上に文字を重ねるとき。 そういうデザインでよく使う、グラデーションを薄く重ねておくアレです。

See the Pen smooth gradient effect by LNLY (@linlymatsumura) on CodePen.

上がこれまでやっていた方法(というか、ただグラデーションを重ねた方法)で、下が今回のテクニックを使ったサンプルです。

何が良くなったのか

これまでの方法ではグラデーションの終わりの部分が(一応グラデーションではあるのだけど)パキっと光彩のように境界線が出てしまっています。 一方改善した方ではほとんど境界線が分からないように滑らかに終わっています。

改善前のグラデーション

    background-image: linear-gradient(
      rgba(#151515, 1),
      rgba(#151515, 0)
    );

元はこのように、シンプルに開始と終了の透明度を変えてグラデーションをかけてます。

改善後のグラデーション

    background-image: linear-gradient(
      rgba(#151515, 1) 0%,
      rgba(#151515, 0.738) 19%,
      rgba(#151515, 0.541) 34%,
      rgba(#151515, 0.382) 47%,
      rgba(#151515, 0.278) 56.5%,
      rgba(#151515, 0.194) 65%,
      rgba(#151515, 0.126) 73%,
      rgba(#151515, 0.075) 80.2%,
      rgba(#151515, 0.042) 86.1%,
      rgba(#151515, 0.021) 91%,
      rgba(#151515, 0.008) 95.2%,
      rgba(#151515, 0.002) 98.2%,
      rgba(#151515, 0) 100%
    ); 

改善後はこのように、細かくステップを分けて透明度がだんだんと緩やかに変わる( easing )ようになっています。 このおかげで、サンプルのように綺麗にグラデーションするようになります。

mixinや、グラデーションの細かい学び

sass mixin

元記事では作者によるPostCssのプラグインが紹介されているので、PostCSS案件ではそちらを。 Sassはないそうなので、こんなミックスインにしておくと使いやすいかなと。

グラデーションは透明度を変えて重ねる

全部の場合でとはいかないけど、

background-image: linear-gradient($color-A, $color-B)

このようにlinear-gradientだけで色を変えるより、

background-color: $color-A;
background-image: linear-gradient(rgba($color-B, 0), $color-B);

のように重ねて透明度で色を変化させたほうが、今回のようなのを適用するのに楽 *2

See the Pen 2 way to gradient. by LNLY (@linlymatsumura) on CodePen.

transparentは何色か

transparentrgba(0,0,0,0)に等しく、つまり「黒」だ。だから、background-image: linear-gradient(blue, transparent)としたときは、だんだんと青のまま不透明度が下がっていくのではなくて、中間色ではグレーが混ざることになる。望んだ結果を得るにはbackground-image: linear-gradient(blue, rgba(blue, 0))とする *3 必要がある

そんな感じ。ハピネス。

*1:https://css-tricks.com/easing-linear-gradients/

*2:rgba()に色名を引数として渡すにはsassの使用を前提

*3:rgba()に色名を引数として渡すにはsassの使用を前提