CSS3シャドウ

CSS3 ボックスシャドウ

  • ボックスシャドウはボックスモデルの外側・内側に影を作ることができ、

　　「X軸・Y軸・ぼかし具合・色」を設定することができます。

  • また、カンマ（,）で区切ることによって複数の影を作れます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3 ボックスシャドウ</title>
<style>
#bShadow1, #bShadow2, #bShadow3 {
  width: 200px;
  height: 100px;
  margin: 50px 30px;
}
#bShadow1 {
  -webkit-box-shadow: 0 0 6px #666;
  -moz-box-shadow: 0 0 6px #666;
  box-shadow: 0 0 6px #666;
}
#bShadow2 {
  -webkit-box-shadow: inset 0 0 6px #666;
  -moz-box-shadow: inset 0 0 6px #666;
  box-shadow: inset 0 0 6px #666;
}
#bShadow3 {
  -webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
  -moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
  box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;
}
</style>
</head>
<body>
<div id="bShadow1"></div>
<div id="bShadow2"></div>
<div id="bShadow3"></div>
</body>
</html>

CSS3 テキストシャドウ

  • ボックスシャドウはテキストの外側に影を作ることができ、

　　「X軸・Y軸・ぼかし具合・色」を設定することができます。

  • また、カンマ（,）で区切ることによって複数の影を作れます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3 テキストシャドウ</title>
<style>
#tShadow1, #tShadow2, #tShadow3, #tShadow4 {
  font-size: 30px;
  line-height: 1.0;
  margin: 30px 50px;
}
#tShadow1 {
  text-shadow: 1px 1px 3px #666;
}
#tShadow2 {
  text-shadow: 0 0 6px #666;
  color: #fff;
}
#tShadow3 {
  text-shadow: -1px -1px 2px #f00, 1px 1px 2px #00f;
}
#tShadow4 {
  text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}
</style>
</head>
<body>
<div id="tShadow1">テキスト<br>シャドウ</div>
<div id="tShadow2">テキスト<br>シャドウ</div>
<div id="tShadow3">テキスト<br>シャドウ</div>
<div id="tShadow4">テキスト<br>シャドウ</div>
</body>
</html>