面白いCSSを見つけたのでご紹介します。
ラインマーカーっぽいこと
いろはにほへと
閲覧しているブラウザでのCSSの対応状況にもよりますが、「いろはにほへと」の"はにほ"の部分の下半分くらいに色が付いているかと思います。
これは、CSSのbackgroundまたはbackground-imageにlinear-gradientというグラデーションを定義する指定を利用しています。
linear-gradient
使い方はさまざまなサイトに書いてありましたが、意外と公開時期によって内容がバラバラでした。
ですので、少し試してみた結果を自分なりに解説してみます。
基本
background : linear-gradient(<開始位置>, <開始色>, <途中色>, <終了色>);
これが基本の定義です。
グラデーションを定義するCSSですので、だんだんと色を変化させていくことができます。
変化する色の出発地点を<開始位置>に指定し、最初の色を<開始色>で指定します。
そこから、最終的に変化させたい色を<終了色>に指定することで、自動的にグラデーションが行われます。
わかりやすくブロック要素で見てみましょう。
縦横100ピクセルの箱を用意し、赤→緑→青とグラデーションさせています。
CSSの定義は以下の通り。
border: 1px solid #000; // 枠線(太さ 線の種類 線の色) width: 100px; // 幅 height: 100px; // 高さ background-image: linear-gradient(#f00, #0f0, #00f); // グラデーション
<開始位置>を省略した場合は上から下へ色が変化します。
<開始色>には赤、<途中色>には緑、<終了色>には青を指定しました。
これがグラデーションの基本です。
開始位置
具体的な開始位置の指定方法です。
linear-gradient(to top|left|bottom|right, #fff, #000);
「to XXX」という形で指定します。
topは上、leftは左、bottomは下、rightは右です。
また、to top leftなら左上、to bottom leftなら左下という指定も可能です。
具体的には以下のような感じです。
to left | to top left | to bottom left |
|---|---|---|
|
|
|
|
開始色を白、終了色を黒としています。「to XXX」で指定した方向へ向かって色が変化しているのがわかるかと思います。
また具体的な角度の指定も可能です。
linear-gradient(180deg, #fff, #000);
「XXXdeg」という形でより細かい向きが指定できるようになります。
0deg | 30deg | 60deg | 80deg |
|---|---|---|---|
|
|
|
|
|
degは角度を表す「Degree」だと思います。
0をtopとして、ぐるりと360で右回りに1周するイメージです。
開始色、終了色
CSSのカラーコードで色を指定できます。
色そのものについては解説は不要かと思いますが、色の指定方法には少しオプションがあります。
linear-gradient(to bottom, #fff 20%, #000 80%);
グラデーションの比率もセットで指定可能です。具体例を見てみましょう。
10% 90% | 20% 80% | 40% 60% |
|---|---|---|
|
|
|
|
変化の大きさが変わっているかと思います。
方向はいずれも上から下を指定していますが、開始と終了の色の変化タイミングが異なっていますね。
上記ではパーセントを使って割合で変化のタイミングを指定していますが、ピクセルなどでも指定可能です。
<開始色>では指定したタイミングまでは開始色のまま変化せず、指定したタイミングから色の変化が始まります。
<終了色>では指定したタイミングまでで色の変化を終え、以降は指定した色のまま変化しません。
ラインマーカーっぽいCSS
で、本題です。
このグラデーションを使って、下半分だけ文字に色を付けることができます。
いろはにほへと
background-image: linear-gradient(transparent 50%, #ffafaf 50%);
<開始位置>は省略していますので、上から下への変化です。
<開始色>はtransparentを指定しています。上記では触れていませんが、「透明」という意味です。これにより背景色を気にすることなく、"色を付けない"という指定が可能です。また、50%で上半分を指定しています。
<終了色>はラインマーカーで引きたい色を指定します。同じく50%を指定していますので、厳密にはグラデーションを活用していません。
こういうCSS定義を考える人はセンスあるなぁと思います。
また、良いものを見つけたら解説を交えて記事を書きます。
