【CSSのグラデーション】linear-gradientの使い方、斜め、透明度(transparent)、%指定、蛍光ペンのマーカー

プログラミング学習

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

スポンサーリンク

cssのグラデーションの斜めとパーセントで切る

たまに使うと忘れるためめも。

degが角度です。555 70%, #bfbfbf 70%のように、同じ位置に2つの色を指定するとlinear-gradientはパキッと色がわれます。

background: linear-gradient(180deg, #555 0%, #555 70%, #bfbfbf 70%, #bfbfbf 100%);

同じ位置に2つの色を指定しなければ普通にグラデーションになります。

  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 2%,
    #e9e3d5 12%,
    #e9e3d5 88%,
    transparent 98%,
    transparent 100%
  );

コメント

タイトルとURLをコピーしました