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

 WEBデザイン    1,699

 

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

このエントリーをはてなブックマークに追加

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

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

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

スポンサーリンク

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

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

いろいろ塗った感じとかちょっと何かアイデア使ったりできないですね?

スポンサーリンク

それぞれの色とCSSの記述の一覧。

赤色のマーカー。

.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%);
}

コメント

プロフィール

bbb

WEBデザインと輸出入業してます。海外関連、グルメ関連をメインに記事にしています。キュレーションへの投稿、ページのいいねとシェアに喜びます。個人事業の方を応援します!

I'm web designer, and export-import business also. Feel free you can add me on Facebook

 https://www.facebook.com/bbp.jp