蛍光マーカーのように表示するCSS

ホーム
HTML/CSS, WEB技術
蛍光マーカーのように表示するCSS

2018.09.4

蛍光マーカーのように表示するCSS

蛍光マーカー黄色
蛍光マーカーピンク
蛍光マーカーオレンジ

1 CSS
2 HTML
3 関連

CSS


/* ----------------------------------------------------------------------
 蛍光マーカー
---------------------------------------------------------------------- */
.marker-yellow {
	background: linear-gradient(transparent 65%, #ffff66 50%);
}
.marker-pink {
	background: linear-gradient(transparent 65%, #ff99cc 50%);
}
.marker-orange {
	background: linear-gradient(transparent 65%, #ffcc99 50%);
}

/* ----------------------------------------------------------------------

蛍光マーカー

---------------------------------------------------------------------- */

.marker-yellow {

background: linear-gradient(transparent 65%, #ffff66 50%);

}

.marker-pink {

background: linear-gradient(transparent 65%, #ff99cc 50%);

}

.marker-orange {

background: linear-gradient(transparent 65%, #ffcc99 50%);

}

HTML


<strong class="marker-yellow">蛍光マーカー 黄色</strong><br>
<strong class="marker-pink">蛍光マーカー ピンク</strong><br>
<strong class="marker-orange">蛍光マーカー オレンジ</strong>