CSSメモ

CSSだけでグラデーション ページ14

##

画像を使わなくても、グラデーションを使うことができます。
それがこちら。

{
background:linear-gradient(0deg,#カラーコード1,#カラーコード2)
}

degの数字をいじればのグラデーションの角度も変えられます。
角度を変える設定なので、0〜360までです。他に、マイナスでも設定できます。ご自分がわかりやすい方を使ってくださいね。

degではなくても、
to right (右へ)
to left (左へ)
to top (上へ)
to bottom (下へ)
などのワードでも設定できます。
to bottom left で左下 など、background-positionと同じように組み合わせることもできます。
何も設定しない場合は、一色目が上、そして下の二色目に向かってグラデーションになります。

三色以上のグラデーションは、コンマで区切ってカラーコードを足すだけです。結構簡単ですよ。どの色をどのあたりまで、という詳しい設定は後でお話しします。

##

グラデーション応用→←CSSの長さ

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す