developer.mozilla.org
linear-gradientの説明については、MDN web docsさんのページが非常に詳細に書かれているのですが、いまいちピンと来ませんでした。
そんな時はWebインスペクタ！
htmlのスタイルのチェックと加工ができるので、Web開発してると必須なツールです。
Chrome、Safari、FireFoxなど、各ブラウザに搭載されているインスペクタですが、今回は今となってはMac専用となったSafariブラウザがイイ感じだったので紹介しますね！
☆はいこれ
div要素
(100 x 100)
background: linear-gradient(rgb(0,255,0) 50%, rgb(255,0,0) 100%);
背景色の上から50%の位置に緑、次に一番下まで赤ですという設定なんですが、SafariのWebインスペクタでスタイルを参照するとこんな感じです。
linear-gradientの左横の色の所をクリックするとこういうUIが表示されます!
凄くないですか？
linear-gradientが直感的なGUIで表現されてます！
linear-gradientの50%指定しててもなんか滲むんだけど？と思っていたのですが、その理由がビジュアルで表現されています。50%の位置から滲んで色が混ざっているんですね。
色ツマミ(?)をスライドするとグラデーションの位置が動的に変わっていきます。グラデーションの種類やグラデーションの方向も変える事ができます。
クリックする事で色のツマミを増やす事もできます。
なんかPhotoShopっぽい！
ただこのグラデーションツールを表示するとめっちゃメモリ消費が激しくなります(^^; )
☆他のも見てみましょ
★その１
div要素
(100 x 100)
background: linear-gradient(rgba(255,0,0,0) 50%, rgb(255,0,0) 100%);
はい。
★その２
div要素
(100 x 100)
background: linear-gradient(transparent 50%, rgb(255,0,0) 100%);
はい。
"その１"との違いはtransparentを使っているかrgbaを使っているかなのですが、safariブラウザだとtransparentはグレー色が出てしまうので、透明度を使う場合にはrgbaメソッドで指定しといた方が良さそうです。
★その３
div要素
(100 x 100)
background: linear-gradient(rgba(255,0,0,0) 20%, rgb(255,0,0) 50%,rgba(255,0,0,0) 80%);
はい。
☆蛇足(ChromeのWebインスペクタ表示)
linear-gradientの左横にはUIを選択する色アイコンはなく、linear-gradientメソッドの引数の色UIが表示されていますね。
