どうも！LSSです！！
昨日、「【CSS】円形グラデーションってこうやるのかぁ」って記事を書きましたが、今回はもう一つのグラデ―ション、直線グラデーションをやってみます。
サンプル
です
コード
<style><!--
.linegra{
position:relative;
border-radius:8px;
border:1px solid black;
padding:1em;
width:200px;
background-image:linear-gradient(0deg,lightblue ,pink );
}
--></style>
<div class="linegra">サンプル<br />です</div>
※グラデーションについての指定は赤字の一行だけです。
※青字は任意のクラス名。好きに名付けてOKです。
解説
background-image:linear-gradient(0deg,lightblue ,pink );
まず、最初と最後の黄緑の部分は決まり文句で、変更する必要はありません。
角度の指定
0deg,lightblue ,pink
,（カンマ）で区切った３つの項目のうち、１つめが「グラデーションが向かう角度」を指定する部分になります。
「deg」という単位は、算数で習った「度」と全く同じで、例えば
90deg=90度（90°）=直角
180deg=180度（180°）=真逆の方向
って事になります。
0degの時、グラデーションは上に向かいます。
ここで指定した角度分、時計まわりの方向に向きが代わり、例えば
90degの時はまっすぐ右向き、
180degの時は下向き、
270degの時はまっすぐ左向き
の方向に向かうグラデーションとなります。
※角度の指定は省略する事も出来ます。
省略した時は下向きのグラデーションとなります。
色の指定
0deg,lightblue ,pink
２つめの項目は「開始色」、３つめの項目は「終了色」になります。
この場合、開始色を水色、終了色をピンクにしているので、
です
↑「0deg（上に向かうグラデ）、水色からピンクへ」という結果になっています。
角度の指定を省略した場合
先にちょっと触れましたが、
background-image:linear-gradient(lightblue ,pink );
のように、「角度の指定をばっさりカットして、色だけを指定した」場合。
です
↑こうなります。
180degがデフォルト…というと奇妙な感じがしましたが、「上から下に向かうグラデ」と考えると自然な気がしますね^^
色の幅（高さ）を指定した場合
今度は、
background-image:linear-gradient(lightblue 70% ,pink 100%);
のように、それぞれの色の指定の後に%で割合を指定してみます。
すると、
です
となります。
これは
「上から70%の位置は水色（そこまでは水色べったりになる）、上から100%の位置（イコール一番下ですね）はピンクで、その間は水色からピンクのグラデーション」
という事になっています。
次に、
background-image:linear-gradient(lightblue 70% ,pink 70%);
としてみると…？
です
…グラデーションではなくなってしまいました^^;;;
色の切り替わり位置は、上から70%の位置でキッパリと変更されています。
色の指定に「透明」も指定できます^^
background-image:linear-gradient(transparent 70% ,pink 80%);
としてみます。
色を指定する部分にtransparentと書くと「透明」を指定した事になります。
です
ここで、他の装飾を無くしてみます
<style><!--
.mk{
background-image:linear-gradient(transparent 70%,pink 70%);
}
--></style>
よく見かける<span class="mk">サンプル</span>です
↑スッキリと他のCSS指定を無くし、ついでに<div>ではなく<span>で、文章の途中に入れてみました。
すると…
よく見かけるサンプルです
となりました！
あちこちのブログでとてもよく見かける、マーカーになりましたね^^
ちなみに、70%って数値を２つとも、小さくするとマーカーが太くなります。
直線グラデーション、「設定する項目数は円形より格段に少ない点」が楽ですね^^
ただ、%指定のあたりはなかなか分かりづらく、今回の記事を書いてみてやっと「自分が今まで間違った認識を持っていた」事に気づいたりしました^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
