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

関連タイピング
-
自作のハンバーガーメニューを作成しましょう!
プレイ回数3249英語長文721打 -
CSSでよく使うプロパティのタイピング
プレイ回数342英語長文584打 -
日本語訳なし、個人練習用に作った英語長文です
プレイ回数4078英語長文673打 -
個人練習用の英語長文です。
プレイ回数574英語長文795打 -
css 3 暗記用です
プレイ回数759英語長文639打 -
beforeとafter要素を使った装飾です。
プレイ回数303英語長文517打 -
css暗記用 テキストの配置・改行・行の高さ装飾などの指定
プレイ回数423英語長文943打 -
解説なしで、個人練習用のコードです。
プレイ回数383英語長文327打
問題文
(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(画像の上にグラデーションを重ねる)