webめも009 text-shadow,box-shadowによる装飾
■結果(text-shadow)
■コード
html
<section class="textShadow"> <h3>text-shadow: x軸 y軸 ぼかし幅 色 ;</h3> <ul class="sample font"> <li>Drop Shadow</li> <li>Grow</li> <li>Bevel</li> <li>Embos</li> <li>Stroke</li> <li>Neon</li> </ul> </section>
css
h3 { padding: 20px; } .sample>li { margin: 5px; padding: 5px; border: 1px solid #ccc; background: #eee; } .font>li { font-family: arial,sans-serif; font-size: 200%; font-weight: bold; text-align: center; } li:first-child {/* DropShadow 影 */ text-shadow: 2px 2px 2px #999; } li:nth-child(2) {/* Grow:光彩 後光*/ color: #fff; text-shadow: 0 0 5px #999; } li:nth-child(3) { /* Bevel 浮き出し 左上ハイライト、右下シャドウ */ color: #ccc; text-shadow: -1px -1px #fff, 1px 1px 0 #aaa; } li:nth-child(4) {/* Embos:彫り込み 左上シャドウ、右下ハイライト*/ color: #ccc; text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #fff; } li:nth-child(5) {/* stroke:袋文字 輪郭線のみの文字 */ color: #fff; text-shadow: 1px 1px 0 #999, -1px 1px 0 #999, 1px -1px 0 #999, -1px -1px 0 #999; } li:last-child { /* Neon:発光 */ color: #fff; text-shadow: 0 0 5px #fff, 0 0 13px #f03, 0 0 13px #f03, 0 0 13px #f03, 0 0 13px #f03; background: #000; }
参考:HTML5&CCS3標準講座(本)
■box-shadow
box-shadow:横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き);
※縦横指定は必須
.item{ box-shadow: 0 0 10px #CCC; }