アルファ値を使った文字表現

CSS3では透明度を現すアルファ値を色指定で使うことができる。文字色でも利用できるため、重ね合わせの表現ができる。 先ずは、アルファ値の確認のため、左からtext-shadowのアルファ値を1.0、0.9・・・・・と順に減らしている。

CSS

p.alpha01 {
    width:700px;
    font-size:50px;
    padding-left:10px;
    background:url(http://sample.com/img/bg04.png);
    color:#0040C6;
    text-shadow:rgba(0,0,0,1.0) 40px 0 0,
                rgba(0,0,0,0.9) 80px 0 0,
                rgba(0,0,0,0.8) 120px 0 0,
                rgba(0,0,0,0.7) 160px 0 0,
                rgba(0,0,0,0.6) 200px 0 0,
                rgba(0,0,0,0.5) 240px 0 0,
                rgba(0,0,0,0.4) 280px 0 0,
                rgba(0,0,0,0.3) 320px 0 0,
                rgba(0,0,0,0.2) 360px 0 0,
                rgba(0,0,0,0.1) 400px 0 0;
}

HTML

<p class="alpha01">■</p>

■

アルファ値を指定した文字を重ね合わせる。 CSS

p.alpha02 {
    width:700px;
    font-size:50px;
    padding-left:10px;
    background:url(http://sample.com/img/bg04.png);
    color:rgba(0,64,198,0.6);
    text-shadow:rgba(0,0,0,0.4) 5px 3px 0;
}

HTML

<p class="alpha02">■明日は明日の風がふく■</p>

■明日は明日の風がふく■