テキストをマーカーで塗られたようにするCSSに変更してみた

蛍光ペンで線を引いたように見えるCSSをに変更してみた

他のブログで文章中に蛍光マーカーを使ったように見せているブログをよく見かけますよね。このブログでも、同じことをしたかったので、やっみました。やり方を備忘録として残しておきます。

ふわふわ見聞録

文字強調なし

<span class=”y-line_futo”>ここにお好きなことをお書きください</span>

文字強調あり

<strong =”y-line_futo”>ここにお好きなことをお書きください</b>

【黄色：太線】

.y-line_hoso {
background: linear-gradient(transparent 0%, #ffff66 0%);
}
【黄色：細線】

.y-line_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
【水色：太線】

.blue-line_futo {
background: linear-gradient(transparent 0%, #66ccff 0%);
}
【水色：細線】

.blue-line_hoso {
background: linear-gradient(transparent 60%, #66ccff 60%);
}
【ピンク色：太線】

.pink-line_futo {
background: linear-gradient(transparent 0%, #ff99cc 0%);
}
【ピンク色：細線】

.pink-line_hoso {
background: linear-gradient(transparent 60%, #ff99cc 60%);
}

[`evernote` not found]