トップ  >  2017年  >  2017.06.15 [CSS] グラデーション
features
[CSS] グラデーション
2017.06.15記
今回はCSSでのグラデーションを試してみました
確認したブラウザはEdge15, Chrome58です。

参考:
https://www.w3schools.com/css/css3_gradients.asp
http://www.htmq.com/css3/radial-gradient.shtml

radial-gradient()

#RG1
radial-gradient(red, yellow)
形状(Shape)は長方形の要素では楕円(ellipse)、正方形の場合は正円(circle)になるのがデフォのようです

#RG1 {
  background: radial-gradient(red, yellow);
}

3色

#RG2
radial-gradient(red, yellow, yellowgreen)
3色以上もOKのようです。色の指定は「#F00」「#FFFF00」でもよいです 「red 10%, yellow 60%, yellowgreen 30%」のように指定すると間隔を変更できます

#RG2 {
  background: radial-gradient(red, yellow, yellowgreen);
}

+形状

#RG3
radial-gradient(circle, red, yellow, yellowgreen)

#RG3 {
  background: radial-gradient(circle, red, yellow, yellowgreen);
}

closest-side

#RG4
radial-gradient(closest-side at 70% 40%, red, yellow, yellowgreen)
近い辺に合わせて完結するようにグラデーションします
「cloest-corner」もあります

#RG4 {
  background: radial-gradient(closest-side at 70% 40%, red, yellow, yellowgreen);
}

farthest-side

#RG5
radial-gradient(farthest-side at 70% 40%, red, yellow, yellowgreen)
遠い辺に合わせて完結するようにグラデーションします
「farthest-corner」もあります

#RG5 {
  background: radial-gradient(farthest-side at 70% 40%, red, yellow, yellowgreen);
}
CSS グラデーションには「liner-gradient()」「repiating-liner-gradient()」「radial-gradient()」「repiating-radial-gradient()」がありますが、今回は「radial-gradient()」でテストしてみました。
前
2017.07.15 [CSS] ローディングアニメーション
カテゴリートップ
2017年
次
2017.05.15 [CSS] CSS Grid Layout

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.