CSS、グラデーションまとめ【解説付き】
関連タイピング
-
個人練習用のコードです
プレイ回数805英語長文1787打 -
自作のハンバーガーメニューを作成しましょう!
プレイ回数3542英語長文721打 -
自分練習用、英語長文:夢について
プレイ回数553英語長文542打 -
html の基本16色
プレイ回数629206打 -
自分練習用、英語長文
プレイ回数2576英語長文1127打 -
CSSでよく使う単語の練習です。
プレイ回数453長文英字1142打 -
プレイ回数549長文385打
-
初心者向けです。
プレイ回数7602英語546打
問題文
(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(画像の上にグラデーションを重ねる)