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

関連タイピング
-
個人練習用の英語長文です。
プレイ回数567英語長文795打 -
日本語訳なし、しゃべることと歩くことの比較
プレイ回数608英語長文1097打 -
自作のハンバーガーメニューを作成しましょう!
プレイ回数3219英語長文721打 -
個人練習用で作りました。解説なしです。
プレイ回数1250英語長文1140打 -
解説なしで、個人練習用のコードです。
プレイ回数383英語長文327打 -
vue Lifecycle Hooks
プレイ回数192英語157打 -
プレイ回数451長文91打
-
解説なし、個人練習用につくりました。
プレイ回数680英語長文1054打
問題文
(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(画像の上にグラデーションを重ねる)