11/8学習内容（text-shadow,linear-gradient）

概要

text-shadow　テキストに影をつける
box-shadow　要素の周囲の輪郭に影をつける

text-shado使い方

例
text-shadow: 3px 3px 2px #f4f4f4 ;
（text-shadow: offset-x offset-y blur-radius color;）

オフセット値と影の色（＋ぼかしの値）を指定する。
オフセット値とは基準からの距離の値のこと。
X軸、Y軸で表す。
offset-x:　ーは左　+は右
offset-y　ーは上　　＋は下
blur-radius ：ぼかし。数値が大きほど強くなる。

ネオン装飾の仕方

offset-x, offset-yの数値を0に設定すると、指定している文字の真後ろから影がついたネオンぽい装飾できる

参考
https://coliss.com/articles/build-websites/operation/css/css-neon-sign-effects.html

縁取りの仕方

ぼかしを0にして、上下左右・斜め方向に影を指定すると、文字の縁取り、text-shadowはカンマで区切ることによって複数の影を一つのテキストに指定することができます。

linear-gradient()の使い方

線形のグラデーションの意
background: linear-gradient(角度, 開始する色, 終了する色);
角度
正の値を記述：「時計回り」
負の値を記述：「反時計回り」

０deg ↑
90deg　→
180deg　↓
-90deg　←

大まかでな方向でもいい場合
background: linear-gradient(to 方向, 開始する色, 終了する色);
degの代わりに「top」「right」「bottom」「left」を記述

複数の色も指定をしたい場合。
background: linear-gradient(・・・　開始の色, 中間の色, 終了の色);

色経由点 （color stops）

グラデーションの中で色が変わる位置のこと
設定方法
background: linear-gradient(方向, 開始の色 位置, 終了の色 位置);
色のあとに位置を入れる。（％やpx）

カスタムプロパティと掛け合わせることも可能。
:root {
--○○: linear-gradient（・・・）

画像にフィルターをかける

backgroundにまとめて記述する
一色掛けの場合
background: linear-gradient(#0003, #0003 ),

マーカーの引き方

background-image: linear-gradient(transparent 50%, #ffbb1e 0%);
アンダーラインの太さを変更したい場合は、「transparent」の位置の%を調節
%の値を小さくすれば、アンダーラインが太くなる

円形にする場合

linear-gradientをradial-gradientに置き換える。