【CSSだけでテキストにグラデをかける方法】
シャドウ（影）をつけるだけなら、text-shadow でOK。
いや、最初から画像ソフトでグラデつけておけばいいじゃん？
って思う方もおられるでしょうけど、
文字の内容（文言）が途中で変更になったら画像作り直しですよね？
テキストならHTMLちょっと書き換えるだけで何とでも修正できます。
でも文字のグラデーションってどうやれば？
背景色にグラデをつけるときに使うlinear-gradient ではありません。
文字にグラデをつけるんです。
手順は以下の通り。
考え方だけ示します。
１．グラデをつけたい文字をタグで囲む。
２．CSSでタグに疑似要素 :before を付け、positionとdisplayプロパティで元の文字の上に重なるように配置。
→以下、これを疑似レイヤーと呼ぶ。
３．元のタグに任意の属性を指定し、属性値に元と同じ文字列をセット。
→ title="xxxx" など。
４．疑似レイヤーにcontent:attr(属性); を指定し３と同じ文字列が割り当たるようにする。
５．疑似レイヤーに mask-image を適用し、color を指定する。
なぜこうすれば文字にグラデがかかるか？
エッセンスは２つ。
＜１＞
疑似要素:before が描画されるレイヤーは、元の要素のレイヤーより上だから。
＜２＞
content: attr(属性); で、元のタグの属性値を引っ張ってくる（参照する）ことができるから。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。
