こんにちは、エムケーワイです。
最近テレビでとあるワイドショーを観ていて、使われているパネルの見出しのデザインがちょっといいなと思ったので、h2のCSS設定を同じ感じになるよういじってみました(とりあえずこのページだけ。そのうち全ページに展開するかもしれません)。
どんなデザインかというと、
h2 New Design!
斜線で区切られたグラデーションがカッコいいと思いました^_^;
色は本サイトの背景色に合わせて黒とグレーのグラデーションにしています。
斜線とグラデーションと来たら”linear-gradient”でしょ！って事で取り掛かったのですが、予想に反して結構手こずったので備忘録を残します。
本ページは、PC画面で確認しながら書いています。そのためスマホでは見え方が説明と異なる部分があるかと思います。あらかじめお断りしておきます。
最初はひとつのlinear-gradientでできると考えて、下記のように設定してみました。
.mkyH2LG1 {
background: linear-gradient(125deg, black 70%, gray 70%, gray 77.5%, darkgray 77.5%, darkgray 85%, silver 85%, silver 92.5%, gainsboro 92.5%);
}斜線が右上がりになるよう角度を125度とし、黒とグレー計5色のグラデーションにしました。最後の”gainsboro”は本文領域の背景色と同じ色なので見た目は4色のグラデーションになります。
ひとつの色が終わった直後から次の色を開始することで色が徐々にではなく、一気に切り替わります。
結果は下のような感じになります。
One linear-gradient
一見問題ないように見えますが、よく見ると最初の「こんな感じです」より幅が少し狭くなっています。
また、意図的に幅を狭くすると、こんな感じになります。
One linear-gradient
テキストが改行されて高さが増えると、グラデーションの右端がトリミングされてしまいました。
幅や高さに関係なく全体を表示させたかったので、ここから試行錯誤を開始しました。
＜linear-gradientの分割＞
“background”の仕様を調べてみると、複数の背景画像(linear-gradientも”background-image”です)を設定できるようなので、複数のlinear-gradientに分割することにしました。
下図のように5つのパーツに分割します。
Parts1
Parts2-5
各パーツの幅はParts1が70%、Parts2～Parts5がそれぞれ7.5%で、トータルで100%になります。
＜試行錯誤1＞
まず、これらのパーツを左から順番に隙間なく並べます。
.mkyH2LGs1 {
background-image:
linear-gradient(to right, black 50%, black 100%),
linear-gradient(to bottom right, black 50%, gray 50%, gray 100%),
linear-gradient(to bottom right, gray 50%, darkgray 50%, darkgray 100%),
linear-gradient(to bottom right, darkgray 50%, silver 50%, silver 100%),
linear-gradient(to bottom right, silver 50%, gainsboro 50%);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
left top,
left 70% top,
left 77.5% top,
left 85% top,
left 92.5% top;
background-size:
70% 100%,
7.5% 100%,
7.5% 100%,
7.5% 100%,
7.5% 100%;
}Parts1は黒一色ですが、linear-gradientでは少なくとも2色指定しないとダメなようなので、黒を2回指定しています。
Parts2～Parts5は対角線で色が切り替わるよう、方向を”to bottom right”とし、50%で色を切り替えています。
“background-position”で各パーツの開始位置を左端基準で指定し、”background-size”で各パーツの幅と高さを指定しています。
結果はこんな感じです。
LGs Trial & Error (1)
あれ、何かおかしい…
Parts1とParts2が大きく重なり、他のパーツ同士も若干重なっているようです。
＜試行錯誤2＞
Parts2以降の開始位置がおかしいようなので、Parts2～Parts5の位置を右端基準で指定することにしてみました。
background-position:
left top,
right 22.5% top,
right 15% top,
right 7.5% top,
right top;結果はこんな感じです。
LGs Trial & Error (2)
Parts2～Parts5がほぼ本来の位置に来ましたが、Parts1とParts2の間に隙間が出来てしまいました。また、Parts2～Parts5の重なりも残ったままです。
＜試行錯誤3＞
今度はParts2～Parts5の間隔を8%刻みにしてみました。
background-position:
left top,
right 24% top,
right 16% top,
right 8% top,
right top;結果はこんな感じです。
LGs Trial & Error (3)
Parts2～Parts5の重なりは改善されましたが、Parts1とParts2の隙間がわずかに残っています。
＜試行錯誤4＞
今度はParts1の幅を70.5%にしてみました。
background-size:
70.5% 100%,
7.5% 100%,
7.5% 100%,
7.5% 100%,
7.5% 100%;結果はこんな感じです。
LGs Trial & Error (4)
はい、良い感じになりました。ここで幅を狭めてみます。
LGs Trial & Error (4)
高さが変わっても右端はトリミングされていませんが、パーツ同士が少し重なっており、斜線の下の方が縦線になっています。
なかなかうまくいきません( ﾉД`)
＜試行錯誤5＞
ここで、発想を転換し、パーツが重ならないようあえて隙間を空けて配置することを考えました。隙間は最下位層のパーツに適切な色を配置しておき、その色で埋めればいいのではないか！？
そうすると、Parts1を最下位層とし、黒の右側に他の4色を配置しておけば良さそうです。backgroundに複数の背景画像が指定された場合、先に指定された画像ほど上位層になるので、各パーツの定義を逆順にすることにしました。これで各パーツが重なった場合パーツ5が最上位層に、Parts1が最下位層になります。
併せて、Parts2～Parts5の幅を7%に縮小し、開始位置はそのままとして各パーツ間に隙間を作ります。そしてParts1は、黒の幅を72%とし、黒の右に他の4色を8%ずつの幅で並べます。
これで、Parts1(最下位層)とParts2～Parts5(上位層)は下図のようになります。
Bottom
Upper
これらを重ねてみます。
LGs Trial & Error (5)
想定通りParts2～Parts5の各パーツ間の隙間がParts1の色で埋められ、斜線がきちんと表示されています。
幅を狭めてみると、
LGs Trial & Error (5)
特に問題ないように見えますが、いかがでしょうか？
CSS設定の最終形は下記のようになりました。
.mkyPostH2LGs {
background-image:
linear-gradient(to bottom right, silver 50%, gainsboro 50%),
linear-gradient(to bottom right, darkgray 50%, silver 50%, silver 100%),
linear-gradient(to bottom right, gray 50%, darkgray 50%, darkgray 100%),
linear-gradient(to bottom right, black 50%, gray 50%, gray 100%),
linear-gradient(to right, black 72%, gray 72%, gray 80%, darkgray 80%, darkgray 88%, silver 88%, silver 96%, gainsboro 96%);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position:
right top,
right 8% top,
right 16% top,
right 24% top,
left top;
background-size:
7% 100%,
7% 100%,
7% 100%,
7% 100%,
100% 100%;
color: white;
padding: 10px 10px 10px 20px;
}以上、h2の背景を斜め方向のグラデーションにしてみました。
複数のlinear-gradientを使うというのがミソですが、”background-position”と”background-size”の関係が計算通りにならなくて試行錯誤を重ねました。いまだによくわかっていません。私の考え方が間違っていたらご指摘いただけるとありがたいです。
最後までお読みいただきありがとうございました。