どうも！LSSです！！
結構前に、「CSSでグラデーションする文字」を「下書き供養祭」としてネタにしました。
あの時はまだ「どうしてそうなるのか」イマイチ分からないままだったので「下書き供養」としましたが、ちょっと分かった気がしたので、再度ネタにしてみます！
↓こんなのを作ってみました。
Little Strange Software
コード
<span style="font-size: 50px; font-weight: bold; color: lightblue; background-color: blue; background-image: linear-gradient(180deg,transparent 20%,#ffffffe0 60%,transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Little Strange Software</span>
コード解説
分かりやすいように、改行を入れてみます。
<span style="
font-size: 50px;
font-weight: bold;
color: lightblue;
background-color: blue;
background-image: linear-gradient(180deg,transparent 20%,#ffffffe0 60%,transparent 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
">
Little Strange Software
</span>
文字の基本設定部分
font-size: 50px;
font-weight: bold;
color: lightblue;
の３行は、グラデーション指定以外の、文字の基本的な設定部分です。
フォントサイズ 50px、
太字で、
文字色は明るい青。
と、指定しています。
ここで指定している「文字色」は、この後指定するグラデ指定に対応していないブラウザで見た時用の代替指定です。
グラデで見れる場合には意味のない指定となります。
グラデーションを「背景として」 指定する部分
background-color: blue;
background-image: linear-gradient(180deg,transparent 20%,#ffffffe0 60%,transparent 100%);
背景色は青、
その上に「透明→透けた白→透明」という、上から下に向かうグラデーション。
という指定です。
この指定を適用すると、普通は、
Little Strange Software
↑こういう背景を描く事になります。
大技！「背景を文字の形に繰り抜く」部分
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
背景を「文字の形に繰り抜く（それ以外の部分は背景ナシと同じ状態になる）」、
文字部分を透明色で塗りつぶす。
という指定です。
「文字部分を透明色で塗りつぶす」をしているのは、せっかく繰り抜いた背景の上に、普通に文字色の文字が乗ってしまい、その後ろに隠れてしまうからですね。
つまり、
Little Strange Software
として目に見えているのは、文字ではなくて「文字の形に繰り抜かれた背景」です。
その上に全く同じ形の「透明の文字がのっかっている」 って事になります。
改変例
<span style="font-size: 50px; font-weight: bold; color: lightblue; background-color: blue; background-image: linear-gradient(180deg,transparent 20%,#ffffffe0 60%,transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Little Strange Software</span>
オレンジ色部分のblueが、グラデ文字のベースの色を決めている部分になります。
例えばこれをredにすると、
Little Strange Software
↑こうなります！
緑色の50pxが文字サイズなので、例えばこれを25pxにすると、
Little Strange Software
↑こうなりますね。
で、もちろんLittle Strange Softwareの文字はなんでも好きな言葉に置き換えられます^^
赤い夕陽 背負う 俺の名前は 俺たちの名前は
とか、
闇に描く君は あの日のまま 僕に微笑みかける
みたいな感じですね^^
あと、180degの部分を179degとか微妙に傾けてみるのもいいかもです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
