CSS:背景を蛍光ペンでマークしたようなテキスト装飾

harada 926views 更新:2014年8月25日

CSSだけでテキストを蛍光ペンでマークしたような装飾を施すことができます。
ランディングページなどでたまにみかけますね。
表示サンプルはこちら

HTML

<div>
    CSS:背景を<span class="markYellow">3/4くらい蛍光ペンでマーク</span>したようなテキスト
</div>
<div>
    CSS:背景を<span class="markYellow2">全部蛍光ペンでマーク</span>したようなテキスト2
</div>

CSS

.markYellow {
    background: linear-gradient(#ffffff 40%, #ffdc19 40%);
}
.markYellow2 {
    background: none repeat scroll 0 0 #ffdc19;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません