どうも！LSSです！！
【CSS】グラデーション文字をアニメーションしてみました - Little Strange Software
【CSS】グラデーション文字 応用編 - Little Strange Software
でサンプルとして使用していた「きんきらきんのきーん」ですが、背景がグレーの枠に入れた状態でお披露目していました。
それには理由があって、「グラデーションに白を使っているため、そのまま白背景の記事に配置するとどうにもしまらない」からでした。
かといって、text-shadowで影をつける、という方法はグラデーション文字に関しては使用できず、背景色つきの枠で出していたんですね。
ですが今回、「グラデーション文字に影をつける」方法を見つけました！
きんきらきんのきーん
きんきらきんのきーん
コード
<style><!--
@keyframes goldanm{
0%{background-position:0px 0px;}
100%{background-position:2000px 0px;}
}
.golda{
font-size: 50px;
font-weight: bold;
color: gold;
filter:drop-shadow(1px 1px 0px black);
background-image:
linear-gradient(90deg, brown,yellow,white,yellow,brown);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation:goldanm 10s ease-in-out 0s alternate infinite;
}
--></style>
<p class="golda">きんきらきんのきーん</p>
filter:drop-shadow
というものを使用しました。
値の指定方法は
filter:drop-shadow(右にずらす距離 下にずらす距離 ぼかしのサイズ 色);
と、text-shadowの書き方とほぼ同じです。
数値や色を変える事で、また様々な表現ができそうですね^^
参考までに、きんきらきんのきーん失敗例ｗ
もし「きんきらきんのきーん」に背景色をつけなかったら
きんきらきんのきーん
「しまらない感じ」になっちゃったバージョンですｗ
text-shadowで影をつけたら
きんきらきんのきーん
まったく「きんきらきんのきーん」でなくなってしまいますｗ
以下、そうなってしまう理由について。
グラデーション文字は「グラデーション背景の上に乗せた文字、の形にそって文字部分を切りとり、文字色を透明にする事で、文字の形のグラデーションが現れる」というものす。
普段見ているWebページの表示は、「背景の上にtext-shadow、その上に文字」という並びになるため、文字部分が透明になるとその次に見えるのがtext-shadowなので、真っ黒text-shadowでグラデーション背景が覆い隠されてしまうんですね^^;
第三の影
box-shadowやtext-shadowに似た表現ができるけれど少し違う、filter:drop-shadow。
今回はtext-shadowの代わりとして有効に活用する一例を挙げてみました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
