ねこきっくぱんちのメモ帳

ITに関することいろいろめも。たまにアニメ。

webめも009 text-shadow,box-shadowによる装飾

■結果(text-shadow)
f:id:neko_kick_panch:20170420133618p:plain

■コード

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; }

参考:CSSで影を付けるbox-shadowの使い方 | Web’Notes