CSS、グラデーションまとめ【解説付き】
簡単な解説付きでグラデーションをまとめ、個人練習用
グラデーションの方向や画像の上からのグラデーション、三色、四色のグラデーションのコードサンプルです。
関連タイピング
-
CSS 暗記用です
プレイ回数472 英語長文562打 -
プレイ回数76 英字169打 -
CSS 3 暗記用です
プレイ回数642 英語長文587打 -
読み方の勉強です。
プレイ回数3662 短文英字171打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数3935 英語長文721打 -
プレイ回数1270 英字863打
-
HTML5とCSS3を学ぼう
プレイ回数2.7万 長文869打 -
CSSの背景に関するプロパティ
プレイ回数416 長文495打
問題文
ふりがな非表示
ふりがな表示
(ｂａｃｋｇｒｏｕｎｄ：ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
左から右へグラデーション
(ｂａｃｋｇｒｏｕｎｄ：ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
円形の広がるグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： －ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（Firecfox対応）
(ｂａｃｋｇｒｏｕｎｄ： －ｗｅｂｋｉｔ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（webkitブラウザ向け）
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００， ＃ｆｆｆ）；)
左から右のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００ ５０％， ＃ｆｆｆ）；)
５０％まで#000でぬって、そこからグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ，＃ｆｆｆ，)
３色グラデーション１(３０％まで#FFFと#FFC778。
(＃ｆｆｃ７７８ ３０％，＃ｆ８９１７４）；)
３色グラデーション２（３０％以降は#FFC778と#F89174で)
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃ｆｆｆ，)
四色グラデーション１
(＃ｆｆｃ７７８ ３０％， ＃ｆ８９１７４ ６０％， ＃７４８ａｆ８）；)
四色グラデーション２
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ＃ｆｆｆ， ＃ｆ８９１７４）；)
２５度の傾きでグラデーション
(－ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（６５ｄｅｇ， ＃ｆ１３ｆ７９， ＃ｆｆｃ７７８）；)
２５度の傾きでグラデーション（firefox用：９０－２５＝６５deg）
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ｒｇｂａ（２５５， ０， ０， ０．４），)
オーバーレイ１（画像の上にグラデーションを重ねる）
(ｒｇｂａ（０， ２５５， ０， ０．４）） ，ｕｒｌ（ｇａｚｏｕ．ｕｒｌ）；)
オーバーレイ2（画像の上にグラデーションを重ねる）