css3のlinear-gradientで蛍光ペンのマーカーを作成(色と太さと透明度の関係)

シェアする

wordpress001

css3のlinear-gradientを使うことにより、
蛍光ペンのマーカーのような効果を作成できます。

スポンサーリンク

linear-gradientの本来の使い方

linear-gradientの命令は、ご存知の方も多いかと思いますが、
もともとグラデーションの効果を作成する命令です。基本としてはこちらがわかりやすいと思います

CSS3 グラデーション(gradient)の指定方法 | CSS Lecture

その値をうまく使って、こうすれば蛍光ペンっぽいよね、
と見せているに過ぎません。

スポンサーリンク

電子書籍のおすすめ比較

linear-gradientの使い方(色と太さの関係)

もちろん、backgroundでもできますけど、これだとマーカーの太さを変えられないんですよね。
paddingで調整はできます。

.marker {
	background: #f8f8d0;
}

さて本題です。そこで、こんな風に書きます。

.thinmarker {
	background: linear-gradient(transparent 30%, #ffff66 30%);
	font-weight: bold;
}

.lime-thinmarker {
	background: linear-gradient(transparent 60%, #66FFCC 60%);
	font-weight: bold;
}

.water-thinmarker {
	background: linear-gradient(transparent 60%, #66ccff 60%);
	font-weight: bold;
}

transparentが透明度ですね。%は透明度ではなく、グラデーションの位置(高さ)です。
0%にすると、上まで塗ります。100%に近づけるに従って、塗りの面積が小さくなります。

同じパーセントにしているため、グラデーションはかかりません。

スポンサーリンク

linear-gradientで蛍光ペンにグラデーションをかける

もうすこし応用に入ります。

.thinmarker {
	background: linear-gradient(transparent 30%, #ffff66 100%);
	font-weight: bold;
}

色だけ100%にすると、上が黒からのグラデになりますね。もとの色が黒なのか。

まあ、とりあえず、同じ%にして使った方がよさそうですね。

もしくは、ホワイトからのグラデーションにしたいのなら…

.thinmarker {
	background: linear-gradient(#ffffff 30%, #ffff66 100%);
	font-weight: bold;
}

ですかね

いや、白指定より、rgba(255, 255, 255, 1.0)の方がいいのか。

.thinmarker {
	background: linear-gradient(rgba(255, 255, 255, 1.0) 30%, #ffff66 100%);
	font-weight: bold;
}

transparentと仕様が違うため、黒にはならないようです。もう少し調べた方がいいかもしれませんが、
とりあえず、やりたいことはできたため、こんなところで…。

スポンサーリンク

シェアする

フォローする