文字をマーカーのように強調するCSS設定。個人用まとめです。
こんにちは! あますた(@amaguristar)です。前々から『HPにマーカーを引いた方がいいよな〜』と思っていました。以前、書き方は調べたことがあるのですが、調べるだけで満足して未実装。これはそろそろスニペット的にメモしておこうかな?って感じの今回です。
マーカー一覧
※個人用にカスタムしてます。
- 黄色ペン
-
.mark_yellow { background: linear-gradient(transparent 70%, #ffea00 70%); }
- 赤ペン
-
.mark_red { background: linear-gradient(transparent 70%, #d7003a 70%); }
- 青ペン
-
.mark_blue { background: linear-gradient(transparent 70%, #0095d9 70%); }
使用例
<span class="mark_yellow">黄色ペン</span>
結果: mark_yellow-表示テスト
CSS一括登録
/* マーカー */ .mark_yellow { background: linear-gradient(transparent 70%, #fcd575 70%); } /* 卵色 */ .mark_red { background: linear-gradient(transparent 70%, #d7003a 70%); } /* 紅 */ .mark_blue { background: linear-gradient(transparent 70%, #0095d9 70%); } /* 青 */
まとめ
個人的い使用するマーカーのスニペット的な意味合いで保存。色や太さは各々カスタムして下さい。本職ではないので間違いがあるかも分かりませんが、その際はこっそりご連絡お願いしますv
追記: 「css」の詳細は下記の記事を参照。