ホーム WEBデザイン全22色！CSSで蛍光ペンマーカーで線引したような雰囲気を出す。

2016年4月18日

全22色！CSSで蛍光ペンマーカーで線引したような雰囲気を出す。

最近よく目にする強調部分を蛍光ペンマーカーで線引したようなCSSです。全22色を用意してみました。CSSのlinear-gradient属性のグラデーションを使って設定します。

CSSの設定方法は以下です。

background:linear-gradient(transparent 線の太さ, 線の色 0%);

蛍光ペンマーカーっぽいCSSを全22色を作ってみた。

比較対象として作つくりました。蛍光ペンマーカーっぽい色を22色を選んでみました。（最後のはおまけでマジックペンで消した後っぽい感じを、プラス1色。）すべてWEBセーフカラーです。インライン要素にて利用するのが適切だと思いますので、spanやstrongにクラスを付けて利用してください。

いろいろな色で塗った感じとかちょっと何かにアイデアで使ってみたりできないですかね？

赤色のマーカー。

.markerRed{
background: linear-gradient(transparent 50%, #ffcccc 0%);
}

濃い赤色のマーカー。

.markerDeepRed{
background: linear-gradient(transparent 50%, #ff9999 0%);
}

ピンク色のマーカー。

.markerPink{
background:linear-gradient(transparent 50%, #ffccff 0%);
}

濃いピンク色のマーカー。

.markerDeepPink{
background:linear-gradient(transparent 50%, #ff99cc 0%);
}

紫色のマーカー。

.markerPurple{
background:linear-gradient(transparent 50%, #ccccff 0%);
}

濃い紫色のマーカー。

.markerDeepPurple{
background:linear-gradient(transparent 50%, #cc99ff 0%);
}

青色のマーカー。

.markerBlue{
background:linear-gradient(transparent 50%, #99ccff 0%);
}

濃い青色のマーカー。

.markerDeepBlue{
background:linear-gradient(transparent 50%, #66ccff 0%);
}

水色のマーカー。

.markerRightBlue{
background:linear-gradient(transparent 50%, #ccffff 0%);
}

濃い水色のマーカー。

.markerDeepRightBlue{
background:linear-gradient(transparent 50%, #99ffff 0%);
}

エメラルドグリーンのマーカー。

.markerEmerald{
background:linear-gradient(transparent 50%, #66ffcc 0%);
}

緑色のマーカー。

.markerGreen{
background:linear-gradient(transparent 50%, #ccffcc 0%);
}

濃い緑色のマーカー。

.markerDeepGreen{
background:linear-gradient(transparent 50%, #99ff99 0%);
}

黄緑色のマーカー。

.markerYellowGreen{
background:linear-gradient(transparent 50%, #ccff99 0%);
}

濃い黄緑色のマーカー。

.markerDeepYellowGreen{
background:linear-gradient(transparent 50%, #ccff33 0%);
}

黄色のマーカー。

.markerYellow{
background:linear-gradient(transparent 50%, #ffffcc 0%);
}

濃い黄色のマーカー。

.markerDeepYellow{
background:linear-gradient(transparent 50%, #ffff66 0%);
}

オレンジ色のマーカー。

.markerOrange{
background:linear-gradient(transparent 50%, #ffcc99 0%);
}

濃いオレンジ色のマーカー。

.markerDeepOrange{
background:linear-gradient(transparent 50%, #ffcc66 0%);
}

茶色のマーカー。

.markerBrown{
background:linear-gradient(transparent 50%, #cc9966 0%);
}

灰色のマーカー。

.markerGray{
background:linear-gradient(transparent 50%, #ddd 0%);
}

濃い灰色のマーカー。

.markerDeepGray{
background:linear-gradient(transparent 50%, #ddd 0%);
}

黒で消した後。
演出で使ったらおもしろい！？

.markerHidden{
background:linear-gradient(transparent 30%, #333 0%);
}

Twitter でbbpをフォローしよう！

bbb

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。