鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

背景を二色で塗り分けたい(めちゃめちゃ楽しい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%) 

グラデーション例1
グラデーション例1

色のチョイスは個人の好みですが、あくまでも背景色としてなら、案外そこまで派手に見えません! この前に白のカードやパネルが並ぶと思ってみてみてください。

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