テキストシャドウ 基本
WORDPRESS
|
1 |
<div class="demo t_shadow">WORDPRESS</div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.demo { width:90%; height:70px; margin-right: auto; margin-left: auto; padding-top: 45px; padding-left: 20px; font-size: xx-large; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; } |
|
1 2 3 |
.t_shadow{ text-shadow: 2px 2px 0px #CCC; } |
text-shadow: 2px 2px 0px #ccc
横2px 縦2px ぼかし0px #影の色
text-shadow: 2px 2px 0px rgba(0,0,0,0.2)
横2px 縦2px ぼかし0px (影の色+透明度0.2）
一般的に色は#333だったり#fff、こんな感じで指定しますがrgbaとは？
大文字のRGBaに変えると分かると思いますが、Rレッド、Gグリーン、Bブルー、aアルファは色の透明度です。色の透明度を0.2から0.3に、みたいな調整が楽なのはいいですが、肝心のrgbの方が普段から使っていないと難しいかもしれません。
テキストシャドウサンプル
ネット上に落ちていた使えそうなテキストシャドウをまとめてみました。色の好みは置いといてスタイルシートの書き方を参考にしてみてください。
WORDPRESS
|
1 2 3 |
.t_shadow2{ text-shadow: 5px 5px 0px rgba(0,0,0,0.2); } |
WORDPRESS
|
1 2 3 4 5 |
.t_shadow3 { background: #999; color: #000; text-shadow: 0px 1px 1px #fff; } |
WORDPRESS
|
1 2 3 4 5 |
.t_shadow4 { background: #F6F6F6; color: #ccc; text-shadow: -1px -1px white, 1px 1px #333; } |
WORDPRESS
|
1 2 3 4 5 |
.t_shadow5 { background: #B7B7B7; color: #ddd; text-shadow: 1px 1px white, -1px -1px #444; } |
WORDPRESS
|
1 2 3 4 5 |
.t_shadow6 { background: #FC0; color: rgba(255,255,0,.7); text-shadow: 1px 1px rgba(255, 128, 0, 0.7), 2px 2px rgba(255, 128, 0, 0.7), 3px 3px rgba(255, 128, 0, 0.7), 4px 4px rgba(255, 128, 0, 0.7), 5px 5px rgba(255, 128, 0, 0.7); } |
WORDPRESS
|
1 2 3 4 5 6 7 8 9 10 |
.t_shadow7 { color:#fff; background: #000; font-weight: bold; text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #000, 0px 0px 20px #000, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700; } |
WORDPRESS
|
1 2 3 4 5 6 7 8 |
.t_shadow8 { color:#000; background: #ccc; font-weight: bold; text-shadow: 1px 1px 0px #aaa, 2px 2px 0px #aaa, 3px 3px 0px #777; } |
WORDPRESS
|
1 2 3 4 5 6 7 8 9 |
.t_shadow9 { color:#800000; background: #ffebcd; font-weight: bold; text-shadow: 2px 2px 0px #d2691e, 2px 2px 0px #800000, 2px 2px 10px #800000; } |
WORDPRESS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.t_shadow10 { color: #e0dfdc; background-color: #333; letter-spacing: .1em; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9); } |
WORDPRESS
|
1 2 3 4 5 6 7 8 |
.t_shadow11 { color:#300; background: #A89E7D; text-shadow: 2px 2px 0px #fff, 4px 4px 0px #C90, 6px 6px 0px #630; } |
WORDPRESS
|
1 2 3 4 5 |
.t_shadow12{ background-color: #333; color: rgba(0,0,0,0.6); text-shadow: 1px 1px 2px rgba(255,255,255,0.1); } |
コメントを残す