cssで蛍光ペン風のマーカーをテキストにつける方法
はじめに
CSS を使うことでテキストに蛍光ペン風のマーカーを簡単につけることができます。
テキストを強調するときに文字を大きくしたり、太字にしたり斜体にしたりできますが、蛍光ペン風マーカーをつけると身近な感じがしますね。
基本的な使い方
基本的な使い方を説明します。
background: linear-gradient(transparent 太さ, 色 グラデーション);
太さ：0%～ 100%まで指定可能で、数字が大きいほど太くなります。
色：#ffff00 のような形式でカラーコードを指定できます。yellow や red も指定可能です。
グラデーション：0%～ 100%まで指定可能で、数字が大きいほどグラデーションが大きくなります。
蛍光ペン風マーカを付けてみる
.marker {
background: linear-gradient(transparent 0%, #ffff00 0%);
}
マーカーの太さを変えてみる
.marker {
background: linear-gradient(transparent 50%, #ffff00 0%);
}
マーカーの色を変えてみる
.marker {
background: linear-gradient(transparent 50%, #ff00ff 0%);
}