【CSS】グラデーションで色々なタイプの金色グラデーションを作る

うちのブログでPV数が多いのが、【CSS】CSSのグラデーションを使ってメタリック感を出すメモです。この記事を書いたのが2014年7月。あれからだいぶ時間も経ったし、グラデーションについても勉強を重ねたので、今ならもっとゴールド感のあるグラデーションをCSSで再現できるのでは?と思いまして記事にしました。

【CSS】グラデーションで色々なタイプの金色グラデーションを作る

うちのブログでPV数が多いのが、【CSS】CSSのグラデーションを使ってメタリック感を出すメモです。この記事を書いたのが2014年7月。あれからだいぶ時間も経ったし、グラデーションについても勉強を重ねたので、今ならもっとゴールド感のあるグラデーションをCSSで再現できるのでは?と思いまして記事にした次第です。

せっかくなので、photoshopで使えるグラデーションの素材をもとに、CSSで再現していきたいと思います。(参考は50 Free Golden Gradients

上の画像は参考サイトのバナーです。この中からいくつかを選んで再現しようと思います。
条件としてブロックのサイズは100px×100pxの固定。

gold-01

gold-02

gold-03

gold-04

4つ再現してみましたが、上の例に上げたlinear-gradientではリピートが使えないので注意が必要です。リピートして利用するときは、repeating-linear-gradientを利用します。

repeating-linear-gradientを使う場合は、上記の例で%表示していた色の割合をpx単位などの数値に変える必要があります。今回100pxのブロックでテストしたので、それを利用して単位を付けてみます。そしてブロックサイズを100pxから200pxに変更します。

gold-01

そうすると、上のようにくり返しグラデーションが起きるようになります。同じように、他のgoldグラデーションでも試してみましょうか。

gold-02
gold-03
gold-04

なんだかものすごく幾何学的模様っぽい何かになってしまいました(笑)立体感のあるストライプ模様みたいな何かですね、これだと。グラデーションを繰り返す際の数値調整をしっかりと考えて行わないと、こういったよくわからないものが完成するといういい例だと思います。

金色グラデーションをrepeat-linear-gradientを使って利用する場合は、グラデーションを繰り返すという都合上、ストップ位置の調整を念入りにやらなくちゃいけません。どんくらいの間隔でリピートさせるのかを予めしっかりと考えておく必要があります。今回のように100px単位で繰り返すと、気持ち悪いモノになりかねません(笑)

実際に使うときは、そのあたりを気をつけてrepeat-linear-gradientをご利用ください。