【CSS】「マイルドライナー」のようなマーカーをブログに実装する方法

「マイルドライナー」のようなマーカーをブログに実装する方法

他の方のブログではよくマーカーのような協調をされている方が多いので、本ブログもCSSを用いてマーカー装飾を実装することにいたしました。

せっかくなので、私の好きなzebraさんの『マイルドライナー』 のようなマーカー色にしたかったので、試行して作成してみました。

 

手順

1.お手持ちの「マイルドライナー」を紙に引きます。

2.Google先生で16進数の色コードを適当に検索し、近い色のコードをとっておきます。

3.cssに記載します。

以上で完成です。

今回作成したものは下記の通りです。

/*マーカー
----------------------------------------------------*/
.marker_m_green_futo {
	background: linear-gradient(transparent 0%, #C5DA7B 0%);
}
.marker_m_green_hoso {
	background: linear-gradient(transparent 60%, #C5DA7B 20%);
}

.marker_m_blue_futo {
	background: linear-gradient(transparent 0%, #C8E6EE 0%);
}
.marker_m_blue_hoso {
	background: linear-gradient(transparent 60%, #C8E6EE 20%);
}

.marker_m_pink_futo {
	background: linear-gradient(transparent 0%, #F5D0D7 0%);
}
.marker_m_pink_hoso {
	background: linear-gradient(transparent 60%, #F5D0D7 20%);
}

【作例】

マイルドグリーン太

マイルドブルー太

マイルドピンク太

マイルドグリーン細

マイルドブルー細

マイルドピンク細  

いかがでしょうか?

『マイルドライナー』は引いた後の文字が読みやすいことが利点ですが、CSSでもその利点は活かされるようです。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です