CSS3のtext-shadowを使って袋文字を作ることができ、文字を立体的に表現することができる。
CSSは次のとおり
h1.shadow03-1 {
font-size:4.0em;
color:#DDD;
text-shadow:#ff3333 1px 1px 0,#ff3333 1px -1px 0,#ff3333 -1px 1px 0,#ff3333 -1px -1px 0;
}
h1.shadow03-2 {
font-size:4.0em;
color:#DDD;
text-shadow:#ff3333 1px 0 0,#ff3333 0 1px 0,#ff3333 -1px 0 0,#ff3333 0 -1px 0;
}
HTMLは次のとおり
<h1 class="shadow03-1">袋文字■</h1> <h1 class="shadow03-2">袋文字の比較■</h1>
サンプル