文字や画像に影をつける コピペで使えるHTML+CSS

text-shadowとbox-shadow。いずれも要素に対して影をつけるCSSプロパティです。このページでは２つがどう違うのか、比較できる具体例を出しながら適用方法について解説します。状況に合わせて使い分けてみてください。

span要素を使って文字に影をつける

text-shadowを使用

style属性で記述

<span style="font-size: 30px; text-shadow: 3px 3px 2px #777777;">この文字に影をつける</span>

スタイルシートで記述

<span class="span-text-shadow">この文字に影をつける</span>

.span-text-shadow{
  font-size: 30px;
  text-shadow: 3px 3px 2px #777777;
}

box-shadowを使用した場合

style属性で記述

<span style="font-size: 30px; box-shadow: 3px 3px 2px #777777;">この文字に影をつける</span>

img要素、画像に影をつける

box-shadowを使用

style属性で記述

<img style="box-shadow: 5px 5px 5px 5px #BBBBBB;" src="pic01.png" />

スタイルシートで記述

<img class="img-shadow" src="pic01.png" />

.img-shadow{
   box-shadow: 5px 5px 5px 5px #BBBBBB;
}

対象要素の概要

span要素

span 単語、フレーズ、文章のグループ化 コピペで使えるHTML+CSS

テキストの一部分をグループ化し、スタイルシートによる装飾をおこなう際に用いるspan要素の解説。

programming-cafe.com

img要素

img 画像 コピペで使えるHTML+CSS

画像を表示するためのimg要素について。decording属性の仕組みと設定、width、heightの設定効果、その他の属性についても解説。

programming-cafe.com

使用するCSSの概要

text-shadow

text-shadow 文字に影をつける コピペで使えるHTML+CSS

テキスト、文字について影をつけるtext-shadowプロパティの使い方。各パラメーターの設定とその効果を具体的に例示しながら解説します。span要素とセットで使いましょう。

programming-cafe.com

box-shadow

box-shadow 影をつける コピペで使えるHTML+CSS

画像imgやdivなどボックス単位について影をつけるbox-shadowプロパティについて、ぼかし、広がり、方向の各数値の設定方法と効果について具体例を挙げながら解説します。

programming-cafe.com