CSS、グラデーションまとめ【解説付き】

関連タイピング
-
読み方の勉強です。
プレイ回数3403短文英字171打 -
プレイ回数451長文91打
-
CSS 3 暗記用です。
プレイ回数623英語長文851打 -
TLJ専用のHTML練習用タイピングです。
プレイ回数4454260打 -
CSSでよく使うプロパティのタイピング
プレイ回数406英語長文584打 -
CSSの暗記用です
プレイ回数1906英語長文1457打 -
自分練習用、英語長文
プレイ回数2553英語長文1127打 -
CSSの暗記用です
プレイ回数589英語長文599打
問題文
(background:linear-gradient(#fff, #000);)
左から右へグラデーション
(background:radial-gradient(#fff, #000);)
円形の広がるグラデーション
(background: linear-gradient(to bottom, #000, #fff);)
上から下のグラデーション
(background: -moz-linear-gradient(top, #000, #fff);)
上から下のグラデーション(Firecfox対応)
(background: -webkit-linear-gradient(top, #000, #fff);)
上から下のグラデーション(webkitブラウザ向け)
(background: linear-gradient(to right, #000, #fff);)
左から右のグラデーション
(background: linear-gradient(to right, #000 50%, #fff);)
50%まで#000でぬって、そこからグラデーション
(background: linear-gradient(to bottom,#fff,)
3色グラデーション1(30%まで#FFFと#FFC778。
(#ffc778 30%,#f89174);)
3色グラデーション2(30%以降は#FFC778と#F89174で)
(background: linear-gradient(to bottom, #fff,)
四色グラデーション1
(#ffc778 30%, #f89174 60%, #748af8);)
四色グラデーション2
(linear-gradient(25deg, #fff, #f89174);)
25度の傾きでグラデーション
(-moz-linear-gradient(65deg, #f13f79, #ffc778);)
25度の傾きでグラデーション(firefox用:90-25=65deg)
(linear-gradient(25deg, rgba(255, 0, 0, 0.4),)
オーバーレイ1(画像の上にグラデーションを重ねる)
(rgba(0, 255, 0, 0.4)) ,url(gazou.url);)
オーバーレイ2(画像の上にグラデーションを重ねる)