どうも！LSSです！！
今回の記事では、試験的に
↑こんなものを作ってみます。
まえがき
CSSに「background-clip」というプロパティがあります。
これは、要素に対して背景画像を「background-image」で指定する際に、「要素の中のどれだけの範囲に対して背景画像を適用するか」を指定するプロパティで、値として指定する候補は「border-box」「padding-box」「content-box」「text」があります。
このブログではそのうち「text」を、「グラデーション文字」として使った事がありました。
他の候補、〇〇-boxを指定する事で、背景の適用範囲が変化します。
…ところで「background-image」プロパティって、「カンマ区切りで並べる事で複数の画像を取り扱える」んですね。
そして更に関連プロパティとして「background-position」や「background-size」も、同じくカンマ区切りで並べる事で、複数用意した「background-image」のそれぞれに対して個別に指定する事ができます。
じゃあ…もしかして「background-clip」もカンマ区切りで個別指定できるのでは？？
background-clipの基本を確認
実験に先立ち、background-clipがどういうプロパティかを確認します。
まず、ベースとする要素と装飾を次のように用意しました。
コード
<style>
.bgtest1{
display:inline-block;
border-radius:50px;
border:10px dotted black;
padding:10px;
font-size:50px;
font-weight:bold;
}
</style>
<div class="bgtest1">実験中です</div>
50pxの角丸、10px幅のdottedなborder（点線の枠線）、内部余白を10pxとって、その中のフォントサイズは50px、太字にしています。
border-boxの場合
<style>指定の中に、
background-image:linear-gradient(pink,red);
background-clip:border-box;
という２行を加えてみました。
「上から下に、ピンクから赤に変化するグラデーション」…なんですが…10px幅の枠線部分だけ、配色がおかしくなってます^^;（chromeの場合。他ブラウザだと違う可能性も？）
コード
<style>
.bgtest2{
display:inline-block;
border-radius:50px;
border:10px dotted black;
padding:10px;
font-size:50px;
font-weight:bold;
background-image:linear-gradient(pink,red);
background-clip:border-box;
}
</style>
<div class="bgtest2">実験中です</div>
padding-boxの場合
background-clip:padding-box;
に変更すると、こうなります。
「border領域を除外し、padding（内部余白）とcontent（中身）の領域に背景適用」って事ですね。
content-boxの場合
background-clip:content-box;
に変更すると、こうなります。
「padding（内部余白）部分も除外し、とcontent（中身）の領域だけに背景適用」という事になり、より範囲が狭くなりました。
textの場合
color:transparent;
-webkit-background-clip:text;
に変更すると、こうなります。
※「background-clip:text;」は正規対応ブラウザが少なく、Chromeでさえ「-webkit-」をつけないと適用されません。また文字色の方が上に乗るため、文字色を透明色指定しています。
「content（中身）の中の、更に文字部分だけに背景適用」という事になり、グラデーション文字になりました^^
コード
<style>
.bgtest5{
display:inline-block;
border-radius:50px;
border:10px dotted black;
padding:10px;
font-size:50px;
font-weight:bold;
color:transparent;
background-image:linear-gradient(pink,red);
-webkit-background-clip:text;
}
</style>
<div class="bgtest5">実験中です</div>
以上が、background-clipの普通の使い方となります。
ここから本題！複数のグラデーションを一つの要素に
さて、一通りbackground-clipの効果を見てきたところで、ようやく本題に入ります。
「background-clipも他のbackground系プロパティと同じようにカンマ区切りで複数の画像（グラデーション）を、一つの要素の各boxに適用できるのか？」
コード
<style>
.bgtest6{
display:inline-block;
border-radius:50px;
border:10px dotted black;
padding:10px;
font-size:50px;
font-weight:bold;
color:transparent;
background-image:
linear-gradient(135deg,white,gray,white),
linear-gradient(blue,lightblue);
-webkit-background-clip:text,content-box;
}
</style>
<div class="bgtest6">実験中です</div>
ひとまず、「text」と「content-box」を併用してみました。
textの方は135度の角度をつけた「白→灰色→白」、content-boxの方は「青→薄青」というグラデーションです。
うまくいきましたね！
ちなみに、background-imageに複数の画像をカンマ区切りで並べた場合、先に書いたものが手前に、後ろにあるものが奥に配置される事になります。
そのため、「範囲の狭いもののほうを先に、広いものほど後ろに書く」事になります。
次に、
background-image:
linear-gradient(135deg,white,gray,white),
linear-gradient(blue,lightblue),
linear-gradient(white,lightgreen,white)
;
-webkit-background-clip:text,content-box,padding-box;
のように付け足すと、
padding（内部余白）部分に「白→薄緑→白」のグラデーションが適用されました。
さらにさらに、枠線部分に「ピンク→ピンク（グラデーションじゃないグラデーションｗ）」を当てると、
↑この記事の冒頭で出した、この状態になります！
コード
<style>
.bgtest8{
display:inline-block;
border-radius:50px;
border:10px dotted black;
padding:10px;
font-size:50px;
font-weight:bold;
color:transparent;
background-image:
linear-gradient(135deg,white,gray,white),
linear-gradient(blue,lightblue),
linear-gradient(white,lightgreen,white),
linear-gradient(pink,pink)
;
-webkit-background-clip:text,content-box,padding-box,border-box;
}
</style>
<div class="bgtest8">実験中です</div>
あとがき
「background-clip」プロパティも、「background-position」や「background-size」と同様に、カンマ区切りで並べる事で、「background-imageにカンマ区切りで並べた画像それぞれ」に対する適用範囲を指定できるんですね！
対象要素となる<div>タグを多重化しなくても、background-imageとbackground-clipだけでこれだけ多重の囲みが作れるのにびっくりしましたｗ
（もっと言えばさらに外側の枠となるoutlineや、border-imageを枠線部分に重ねたら…より複雑になりますが、そこまでいくと さすがにやり過ぎかｗｗｗ）
とりあえず「実験」として、グラデーションを重ねた様子が美しいかどうかは二の次でしたが、うまくデザインできる人が考えると素晴らしい「重ねグラデーション」になるかもですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
