このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.05.30

CSS3 テキストグラデーション指定 スマフォンサイト有効

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系でありながら文字マスク非対応となっていますので、
これまた注意が必要です。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。