シャドウをつける
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>