CSS、グラデーションまとめ【解説付き】
関連タイピング
-
自分練習用、英語長文
プレイ回数2068英語長文1127打 -
初心者向けです。
プレイ回数6584英語546打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数2901英語長文721打 -
プレイ回数41英字169打 -
プレイ回数446長文91打 -
emmetのための備考欄
プレイ回数922短文英字201打 -
個人練習用で作りました。解説なしです。
プレイ回数1207英語長文1140打 -
h2やh3のデザインのcssです。解説なしです。
プレイ回数319英語長文980打
問題文
(ｂａｃｋｇｒｏｕｎｄ：ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
左から右へグラデーション
(ｂａｃｋｇｒｏｕｎｄ：ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
円形の広がるグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： －ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（Firecfox対応）
(ｂａｃｋｇｒｏｕｎｄ： －ｗｅｂｋｉｔ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（webkitブラウザ向け）
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００， ＃ｆｆｆ）；)
左から右のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００ ５０％， ＃ｆｆｆ）；)
５０％まで#000でぬって、そこからグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ，＃ｆｆｆ，)
３色グラデーション１(３０％まで#FFFと#FFC778。
(＃ｆｆｃ７７８ ３０％，＃ｆ８９１７４）；)
３色グラデーション２（３０％以降は#FFC778と#F89174で)
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃ｆｆｆ，)
四色グラデーション１
(＃ｆｆｃ７７８ ３０％， ＃ｆ８９１７４ ６０％， ＃７４８ａｆ８）；)
四色グラデーション２
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ＃ｆｆｆ， ＃ｆ８９１７４）；)
２５度の傾きでグラデーション
(－ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（６５ｄｅｇ， ＃ｆ１３ｆ７９， ＃ｆｆｃ７７８）；)
２５度の傾きでグラデーション（firefox用：９０－２５＝６５deg）
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ｒｇｂａ（２５５， ０， ０， ０．４），)
オーバーレイ１（画像の上にグラデーションを重ねる）
(ｒｇｂａ（０， ２５５， ０， ０．４）） ，ｕｒｌ（ｇａｚｏｕ．ｕｒｌ）；)
オーバーレイ2（画像の上にグラデーションを重ねる）