読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSだけでテキストにグラデをかける方法】

f:id:wp-lesson:20160705104707j:plainf:id:wp-lesson:20160705104712j:plainf:id:wp-lesson:20160705104714j:plain
シャドウ(影)をつけるだけなら、text-shadow でOK。
 
いや、最初から画像ソフトでグラデつけておけばいいじゃん?
 
って思う方もおられるでしょうけど、
文字の内容(文言)が途中で変更になったら画像作り直しですよね?
 
テキストならHTMLちょっと書き換えるだけで何とでも修正できます。
 
でも文字のグラデーションってどうやれば?
 
背景色にグラデをつけるときに使うlinear-gradient ではありません。
文字にグラデをつけるんです。
 
手順は以下の通り。
考え方だけ示します。
 
1.グラデをつけたい文字をタグで囲む。
2.CSSでタグに疑似要素 :before を付け、positionとdisplayプロパティで元の文字の上に重なるように配置。
 →以下、これを疑似レイヤーと呼ぶ。
3.元のタグに任意の属性を指定し、属性値に元と同じ文字列をセット。
 → title="xxxx" など。
4.疑似レイヤーにcontent:attr(属性); を指定し3と同じ文字列が割り当たるようにする。
5.疑似レイヤーに mask-image を適用し、color を指定する。
 
なぜこうすれば文字にグラデがかかるか?
エッセンスは2つ。
 
<1>
疑似要素:before が描画されるレイヤーは、元の要素のレイヤーより上だから。
 
<2>
content: attr(属性); で、元のタグの属性値を引っ張ってくる(参照する)ことができるから。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価(総合3位)