CSS、グラデーションまとめ【解説付き】
関連タイピング
-
日本語訳なし、個人練習用に作った英語長文です
プレイ回数3772英語長文673打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数2817英語長文721打 -
プレイ回数2572英語長文120秒 -
プレイ回数40英字169打 -
解説なし、個人練習用につくりました。
プレイ回数645英語長文1054打 -
beforeとafter要素を使った装飾です。
プレイ回数288英語長文517打 -
解説付きでbox-shadowの基本をまとめています。
プレイ回数270長文315打 -
自分暗記用
プレイ回数712長文333打
問題文
(ｂａｃｋｇｒｏｕｎｄ：ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
左から右へグラデーション
(ｂａｃｋｇｒｏｕｎｄ：ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
円形の広がるグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： －ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（Firecfox対応）
(ｂａｃｋｇｒｏｕｎｄ： －ｗｅｂｋｉｔ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（webkitブラウザ向け）
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００， ＃ｆｆｆ）；)
左から右のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００ ５０％， ＃ｆｆｆ）；)
５０％まで#000でぬって、そこからグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ，＃ｆｆｆ，)
３色グラデーション１(３０％まで#FFFと#FFC778。
(＃ｆｆｃ７７８ ３０％，＃ｆ８９１７４）；)
３色グラデーション２（３０％以降は#FFC778と#F89174で)
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃ｆｆｆ，)
四色グラデーション１
(＃ｆｆｃ７７８ ３０％， ＃ｆ８９１７４ ６０％， ＃７４８ａｆ８）；)
四色グラデーション２
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ＃ｆｆｆ， ＃ｆ８９１７４）；)
２５度の傾きでグラデーション
(－ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（６５ｄｅｇ， ＃ｆ１３ｆ７９， ＃ｆｆｃ７７８）；)
２５度の傾きでグラデーション（firefox用：９０－２５＝６５deg）
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ｒｇｂａ（２５５， ０， ０， ０．４），)
オーバーレイ１（画像の上にグラデーションを重ねる）
(ｒｇｂａ（０， ２５５， ０， ０．４）） ，ｕｒｌ（ｇａｚｏｕ．ｕｒｌ）；)
オーバーレイ2（画像の上にグラデーションを重ねる）