【CSS】グラデーション文字 応用編
どうも！LSSです！！
昨日の記事、
に続き、さらなる応用編です^^
きんきらきんのきーん
Little Strange Software
コード
<p style="background-color: gray; border-radius: 15px; border: 15px inset #dddddd; text-align: center;"><span style="font-size: 50px; font-weight: bold; color: gold; background-image: linear-gradient(170deg, black,brown,yellow,white,yellow,brown,black); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Little Strange Software</span></p>
戦慄！
戦慄！
コード
<span style="font-size: 100px; font-weight: bold; color: black; background-color: black; background-size: 60px 60px; background-image: radial-gradient(circle 30px at 25% 25%,red 25%,transparent 80%),radial-gradient(circle 30px at 75% 75%,red 25%,transparent 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">戦慄！</span>
コード解説
「グラデーション文字」というもの自体、「文字の形に背景を繰り抜いたもの」なので、これまでに作った「背景にグラデーションをかける」CSSをそのまま応用できます！
きんきらきんのきーん
<p style="
background-color: gray; border-radius: 15px; border: 15px inset #dddddd; text-align: center;
">
<span style="font-size: 50px; font-weight: bold; color: gold;
background-image: linear-gradient(170deg, black,brown,yellow,white,yellow,brown,black);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;">Little Strange Software</span>
</p>
「背景を繰り抜く」事により、背景はなくなってしまいますが、グラデーションをかけている<span>タグを囲んでいる<p>タグのほうに背景を指定する事は可能です^^
今回は、
background-color: gray;
border-radius: 15px;
border: 15px inset #dddddd;
text-align: center;
と、きんきらきんを目立たせるために地味なグレーにしましたｗ
そして、きんきらきんなグラデーションが、
background-image: linear-gradient(170deg, black,brown,yellow,white,yellow,brown,black);
これは、以前の記事「【CSS】border（枠線）のグラデーション」で使ったものを再利用しています。
戦慄！
<span style="
font-size: 100px;
font-weight: bold;
color: black;
background-color: black;
background-size: 60px 60px;
background-image:
radial-gradient(circle 30px at 25% 25%,red 25%,transparent 80%),
radial-gradient(circle 30px at 75% 75%,red 25%,transparent 80%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;">戦慄！</span>
ゾンビものとかに使われそうなイメージｗ
これも過去のネタの応用で、
「【CSS小ネタ】水玉模様（radial-gradientは複数書けます）」
からのアレンジですね^^
…ファンシーなはずの水玉模様、黒字に赤玉にして、さらにぼかす（red 25%,transparent 80%としてグラデーション幅を広くとる）と、こうもおどろおどろしくなりますｗ
昨日の記事のコメント欄で
さじさんから「shadowをつけるとしたら」というコメントをいただきました。
自分でも試してみましたが、普通にtext-shadowをつけると
「文字の上にかぶってしまう」
ので、影の色を透過色にしてごまかす事は可能、って感じでした。
と、今日早速、
試していただいています！
こちらも是非、見てください^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
