視覚効果

• トップ
• 逆引きリファレンス
• 視覚効果

• 文字や画像に影をつけるには
• 文字や画像を半透明にするには
• ページを移動する際にビジュアル効果をつけるには

文字や画像に影をつけるには

文字に影をつけるには、スタイルシートの text-shadow を用います。

.shadow1, .shadow2 { font: bold 24pt Arial; color: #600; }
.shadow1 { text-shadow: 2px 2px 2px #966; }
.shadow2 { text-shadow: 1px 1px 0px #fff, 2px 2px 2px #966; }

<div class="shadow1">World Wide Web</div>
<div class="shadow2">World Wide Web</div>

文字や画像を半透明にするには

画像などを半透明にするには、スタイルシートの opacity を用います。詳細は opacity を参照ください。

ページを移動する際にビジュアル効果をつけるには

あるページから別のページに移動する際に、ページの右から左にページがめくれるように変わったり、格子模様でだんだんと変わったりするような視覚効果をつけることができます。詳細は トランジション を参照してください。ただし、この機能は、Internet Explorer 10 で廃止されました。