CSS3 テキストグラデーション指定 スマフォンサイト有効
2011.05.30
この記事は最終更新日から1年以上が経過しています。
CSS3でテキストグラデーション指定をする方法です。
HTML
<p>TEXT BACKGROND GRADIENT</p>
CSS
p{background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0%,#feb08a),
color-stop(49%,#f66428),
color-stop(50%,#f0541f),
color-stop(100%,#f74408));
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
その他任意の指定
}
background-imageでグラデーション指定。
-webkit-background-clipで背景を文字に指定。
-webkit-text-fill-colorで文字色を透明に。
文字のグラデーションの完成！
background-clipはwebkit系のブラウザ以外適応されないので注意が必要です。
また、アンドロイド端末ではwebkit系でありながら文字マスク非対応となっていますので、
これまた注意が必要です。
