社員ブログ

CSSで蛍光ペンみたいな線を引く

2014年02月26日 水曜日

なにかで使えそうなのでメモ。

一行コピペでさくっと実装できるみたい。

strong {
  background: linear-gradient(transparent 40%, #ff9 40%); 
}

chrome、Firefox,IE10で動作確認。

CSS3の線形グラデーションを使用してるみたい。画像を作るのは手間だし、background-colorやborder-bottomだとイマイチですが、これだといい気がします。

最近、先輩から譲りうけたPHPの参考書にやたらマーカーがひいてありまして、
コードでできないものかと思い調べました。

受験勉強を思い出しますね!※大きくするとさらに目立ちますね

 

※safariに対応するには
background: -webkit-linear-gradient(transparent 40%, #ff9 40%);
という記述も追加してあげると対応するみたいです。

 

■引用
テキスト周りで使えるCSSの小技
http://www.webcreatorbox.com/tech/css-tips-for-text/

 

 

Trackback URL
文字サイズサイズ小サイズ中サイズ大