背景を二色で塗り分けたい(めちゃめちゃ楽しいlinear-gradient)
やりたいこと
span
とか div
とか増やさずに、1つの要素をあるところで二色に塗り分けたい、ということがありました。
調べてみたら background: linear-gradient
という指定の仕方があるという。
やり方も簡単そうなので、こちらで実装することに。
とりあえずブラウザ上でやってみたら・・・
これめっちゃ楽しい!!!! (個人の感想です)
以前仕事でパワーポイントで資料を作りまくっていた時、カテゴリ分けてマッピングした資料などに、色使いすぎた果てにグラデーションとかまで使っていたことを思い出しました。 オリンピックカラーとかも結構好きで、インフルエンザウィルスとかめっちゃデザインいいよな、と思ったことも。(3色以上、多いときは7色くらい使われて描写されていることが多いのです)
なのでたまたま私のツボに入っただけだと思いますが、ブラウザでパッと描写された時の鮮やかさはなかなか壮観です。
ぜひみなさんも暇な時に(?)やってみて楽しんでみてください。
linear-gradient使い方
使い方としては、
background: linear-gradient( <グラーデションをかけていく方向>, <色> <スタートからの距離>, <色> <1つ目の色の分岐からの距離>, ...);
という感じです。ちょっとわかりにくいかもですが、以下の例を見ればかなり簡単だとわかると思います。そして何より、一度ブラウザで試してみると、もう一目瞭然にわかります。 やってみるしかないですよ!
いくつか例をあげてみます!
【CSS】
background: linear-gradient(180deg, blue 0%, yellow 50%, green 100%)
色のチョイスは個人の好みですが、あくまでも背景色としてなら、案外そこまで派手に見えません! この前に白のカードやパネルが並ぶと思ってみてみてください。
【CSS】
background: linear-gradient(240deg, lightpink 0%, lightpink 31%, lightblue 50%, lightgreen 70%,lightgreen 100%);
斜めやってみようとしてやってみたので、色ちょっとやりすぎですかねw このように1つ目のパラメーターの度を変えることで、グラデーションがかかっていく方向を決めることができます。
- 180deg :上から下
- 90deg:下から上
to right
,to bottom
,to left
といった指定の仕方もできるようです
二色での塗り分け
今回は、もともと背景色を二色で塗り分ける方法を探していました。 これは、色の分岐点を増やすことで、実装できました。
【CSS】
background: linear-gradient(180deg, #f9f6f5 0%,#f9f6f5 30%, #FFDB12 30%, #FFDB12 100%)
いや〜これは楽しい。 思いもよらず、テンション上がってしまいました。二色塗り分けはともかく、グラデーションはなかなか使いどころが難しそうではありますが、良いデザインではなかなかに生きてくる(しかも楽しい)技術だと思いました。
百聞は一見にしかずです。まだみたことない方は、ぜひやってみてください。
参考記事: 背景色を2色で分割表示する方法 - Qiita