メタリック感のあるグラデーションをつくるmixin #mixin #scss

メタリック感のあるグラデーションをつくるmixin #mixin #scss

以前にメタリックカラーのグラデーションをつくるという記事を書いてみたところ、おかげさまで今でもアクセスがたまにあったりして意外と需要があるような感じを受けました。前回書いた時は5パターンつくって満足したのですが、これはいっそmixin化してしまえば、どんな色になってもメタリック感のあるグラデーションを作ることができるのでは?と思いまして、挑戦してみた結果が今回になります。

メタリック感をグラデーションを使って出すためのポイント

メタリック感をグラデーションを使って出すためのポイントは、いかに暗い色と明るい色を配分するかにかかっております。前の記事では一つのグラデーションを作るのにだいたい5色~7色程度の色を使いました。

それをmixinとして起こすには、色を変えるための関数が必須となってきます。

今回のmixinのポイントはまさにそこにあります。

作ってみたメタリック感を出すグラデーションのmixin

最初に $color1 で設定した色をもとに7色に明度や彩度や色相ずらして調整してから、グラデーション化するという地味な方法です。なお、mixinを見ればわかるようにcompassを導入していないと、このmixinも使えません。

グラデーションサンプルを用意してみました

赤色グラデーション

青色グラデーション

金色グラデーション

自分で作ってみて思ったのだけど、ある程度渋めの色をチョイスするのがポイントかも。

343 views/total