どうもですーはやちです(´ʘ‿ʘ｀)✌
はやち最近思いました( ˘ω˘)
グラデーションでデザインされた文字を画像で切り出すのはめんどくさいなと(◞‸◟)
はやちは思いました( ˘ω˘)
画像ではなくテキストに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に使用している画像はこんな感じの画像
グラデーションの消え具合を予め画像で作り、ベタ塗りのテキストに重ねてグラデーションを作ります( ˘ω˘)
一番明るいところは調整できます( ˘ω˘)
出来上がりはこんな感じきれいですね～✌(´ʘ‿ʘ｀)✌
色々作ってみよう
ウェブフォントを使用した文字
psdでデザインした文字も再現出来ますね( ˘ω˘)
ウェブフォントアイコン
これでアイコンも画像なしでらくらくですね( ˘ω˘)☝
ウェブフォントはこちらのサービスからお借りしました
リフレクトした文字
box-reflectを使用すればカンタンに鏡面反射した文字が作れます。
リフレクトさせたい文字にもマスク用の画像を作りcssでマスクをかけます。
便利ですね～( ˘ω˘)☝
まとめ
グラデーションで使用した文字もマスク用の文字も画像でマスクを作らないと他機種に反映されないという事がわかりました( ˘ω˘)
これでデザインの幅を広げることができますね( ˘ω˘)
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
