背景にグラデーションを設定する際に、最低２色を指定しなければいけないので、自分で２色設定しないといけないかと言うとそうでもない。というお話です。
目次(クリックでジャンプ)
フツーの設定方法
例として、ボックスを作ります(ダサいとか言わないで…)。
背景は白一色です。CSSでなくHTMLで直接描画
display: inline-block;
color: blue;
background: white;
font-size: 2em;
font-weight: bold;
padding: 5px 10px;
border-radius: 30px;
border: solid 6px black;
line-height: 1em;”>そうちゃ</div>
例えば、下のようにグラデーションを設定する場合、普通は左端の色と右端の色の二色を指定します。
先程のHTMLのオレンジの部分を次のように変えています。
この「#fde386」と「#e2912c」が右の色と左の色です。
デベロッパーツールで色を試行錯誤してコピペして設定するので、手間とセンスが必要な上に、左端をもう少し明るくしたいとか右端をもう少し暗くしたいと言う時に調整が面倒くさいです。
そこで「ズルイ」やり方を考えました。まだ競合調査をしていないので既に流布している方法かもしれないけど(汗)
ズルの設定方法
まず、最初の状態からベタ塗り一色の背景色を決めます。デベロッパーツールを使用。
HTMLはこうなっています。
ここで、テキスト編集画面に行って、背景(background)をこの様に書き換えます
すると、ロゴはこうなります(汚い!!)。左から右へ「白」「オレンジ」「黒」のグラデーションになります。
ここからが本番です。またテキスト画面に行って、背景をこのように書き換えます。
すると、ロゴはこうなります。
グラデーションがなめらかになりましたね！どうしてこうなったかというと、
グラデーションは背景の左端を「0%」右端を「100%」として色が変化します。
それを「-50」「150」と指定したので、横幅が倍(200%)のグラデーションができてしまい、その真中部分だけが見えている状態になっているのです。
((比較図))
さて、もう一度上のロゴを見ると、右端が明るい方が良く感じました。そこで今度はこう書き換えます。
すると、ロゴはこうなります。
二色を手動で作ったものには及びませんが、とりあえずは良いかと(汗)
最小限の手間で品質を改善する
品質が劣って感じる一番の原因は、暖色であるオレンジが寒色の「white」へグラデーションしていることなので、whiteつまり#fffを黄色に近づけてやれば改善します。3ケタはR(赤)G(緑)B(青)を表しているので三番目之Bをfから半分の8すればすれば黄色に近づくだろうと「white」を「#ff8」に変えます。
すると、ロゴはこうなります。
左のグラデは温かみが戻って、大分自然になりました。
次は同様の発想で、右端を真っ黒ではなく赤茶色へグラデーションさせればキレイになるでしょうから、blackつまり#000のRを0から8に上げて#800にします
すると、ロゴはこうなります。
左のグラデーションも自然になりました。さらに右と左の色の位置を微調整します
すると、ロゴはこうなります。
二色の指定で作ったものを下に置いて比べると、ちょっと色がきついですが、同じような品質のものができましたね。
↑二色指定でつくったもの
結局、同じ様に面倒くさいじゃねえか！と思うかもしれませんが、この後の調整が段違いにラクですので。
ズルくてラクな
グラデーションのやり方は
分かりましたか？
この記事があなたの役に立てたら嬉しいです！