<div> 黒文字のみの場合、背景がグレーだとコントラストの都合で多少読みにくいと感じることがあります。 </div> <div class="textshadow"> それに対して、黒文字に白のtext-shadowを指定すると文字に立体感が出て、背景がグレーでも可読性が上がります。 が、そのトレードオフとして、テキスト選択時には「白いテキスト+白いシャドウ」となってしまいます。これは読みにくい。バーチャル乱視状態。 </div> <div class="textshadow noshadow"> これを解決するには::selectionを使ってtext-shadowを無効(none)にし、テキスト選択時にはシャドウが出ないようにしてあげましょう。 </div> <div class="textshadow black"> 選択時にテキストの色を反転せずにそのまま黒を維持してみましたが、これもなかなか読みにくいです。有り無しでいうと個人的には無し。</div>
div{ line-height:1.5; margin:30px; padding:20px; border:#999999 1px solid; background-color:#CCCCCC; } .textshadow{ text-shadow:1px 1px 1px #FFF; } ::selection{ color:#FFFFFF; background:#0099FF; } ::-moz-selection{ color:#FFFFFF; background:#0099FF; } .noshadow::selection{ text-shadow:none; } .noshadow::-moz-selection{ text-shadow:none; } .black::selection{ color: #000000; background:#0099FF; } .black::-moz-selection{ color: #000000; background:#0099FF; }