Web事業部実績紹介
Web事業部実績紹介
2013.06.14

Androidでもキレイに表示!css3でテキストにグラデーションをかける方法!

はやち

どうもですーはやちです(´ʘ‿ʘ`)✌

 

 

はやち最近思いました( ˘ω˘)

グラデーションでデザインされた文字を画像で切り出すのはめんどくさいなと(◞‸◟)

 

 

はやちは思いました( ˘ω˘)

画像ではなくテキストにcssでグラデーションを表示できたらなと(◞‸◟)

今回はAndroidにも対応したcss3テキストグラデーションを紹介したいと思います( ˘ω˘)

 

作り方

HTML

htmlはこんな感じ

</pre>
<section>
<h1 class="title01"><span class="style01" title="LIFE IS GOOD">LIFE IS GOOD</span></h1>
</section>
<pre>

 

CSS

cssはこんな感じ

.title01 {
 font-weight: bold;
 font-size: 35px;
}

.style01 {
 display: inline-block;
 text-shadow:1px 2px 3px #000;
 position: relative;
 color: #000000; }
 /*グラデーションマスク▼*/
 .style01:after {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-mask-image: url(grad01.png);
 mask-image: url(grad01.png);
 -webkit-mask-size: 100% 100%;
 mask-size: 100% 100%;
 /*グラデーションの明るいところ*/
 color: #cccccc;
 content: attr(title); }

cssに使用している画像はこんな感じの画像grad01

グラデーションの消え具合を予め画像で作り、ベタ塗りのテキストに重ねてグラデーションを作ります( ˘ω˘)

一番明るいところは調整できます( ˘ω˘)

 

出来上がりはこんな感じきれいですね~✌(´ʘ‿ʘ`)✌

img01

 

色々作ってみよう

ウェブフォントを使用した文字

img02

psdでデザインした文字も再現出来ますね( ˘ω˘)

 

ウェブフォントアイコン

img03

これでアイコンも画像なしでらくらくですね( ˘ω˘)☝

ウェブフォントはこちらのサービスからお借りしました

IcoMoon

 

リフレクトした文字

img04

box-reflectを使用すればカンタンに鏡面反射した文字が作れます。

リフレクトさせたい文字にもマスク用の画像を作りcssでマスクをかけます。

便利ですね~( ˘ω˘)☝

 

全部を実装したデモはこちらになります

(  ˘ω˘)☞ デモ

 

まとめ

グラデーションで使用した文字もマスク用の文字も画像でマスクを作らないと他機種に反映されないという事がわかりました( ˘ω˘)

これでデザインの幅を広げることができますね( ˘ω˘)