CSS、グラデーションまとめ【解説付き】
簡単な解説付きでグラデーションをまとめ、個人練習用
グラデーションの方向や画像の上からのグラデーション、三色、四色のグラデーションのコードサンプルです。
関連タイピング
-
プレイ回数598 長文385打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数4405 英語長文721打 -
CSSでよく使うプロパティのタイピング
プレイ回数544 英語長文584打 -
beforeとafter要素を使った装飾です。
プレイ回数350 英語長文517打 -
解説なし、個人練習用につくりました。
プレイ回数746 英語長文1054打 -
vue Lifecycle Hooks
プレイ回数270 英語157打 -
個人練習用の英語長文です。
プレイ回数709 英語長文795打 -
個人練習用：並び変え、間隔の調整、縦方向の揃えなど基本のまとめ
プレイ回数381 英語長文813打
問題文
ふりがな非表示
ふりがな表示
(ｂａｃｋｇｒｏｕｎｄ：ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
左から右へグラデーション
(ｂａｃｋｇｒｏｕｎｄ：ｒａｄｉａｌ－ｇｒａｄｉｅｎｔ（＃ｆｆｆ， ＃０００）；)
円形の広がるグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： －ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（Firecfox対応）
(ｂａｃｋｇｒｏｕｎｄ： －ｗｅｂｋｉｔ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏｐ， ＃０００， ＃ｆｆｆ）；)
上から下のグラデーション（webkitブラウザ向け）
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００， ＃ｆｆｆ）；)
左から右のグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｒｉｇｈｔ， ＃０００ ５０％， ＃ｆｆｆ）；)
５０％まで#000でぬって、そこからグラデーション
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ，＃ｆｆｆ，)
３色グラデーション１(３０％まで#FFFと#FFC778。
(＃ｆｆｃ７７８ ３０％，＃ｆ８９１７４）；)
３色グラデーション２（３０％以降は#FFC778と#F89174で)
(ｂａｃｋｇｒｏｕｎｄ： ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（ｔｏ ｂｏｔｔｏｍ， ＃ｆｆｆ，)
四色グラデーション１
(＃ｆｆｃ７７８ ３０％， ＃ｆ８９１７４ ６０％， ＃７４８ａｆ８）；)
四色グラデーション２
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ＃ｆｆｆ， ＃ｆ８９１７４）；)
２５度の傾きでグラデーション
(－ｍｏｚ－ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（６５ｄｅｇ， ＃ｆ１３ｆ７９， ＃ｆｆｃ７７８）；)
２５度の傾きでグラデーション（firefox用：９０－２５＝６５deg）
(ｌｉｎｅａｒ－ｇｒａｄｉｅｎｔ（２５ｄｅｇ， ｒｇｂａ（２５５， ０， ０， ０．４），)
オーバーレイ１（画像の上にグラデーションを重ねる）
(ｒｇｂａ（０， ２５５， ０， ０．４）） ，ｕｒｌ（ｇａｚｏｕ．ｕｒｌ）；)
オーバーレイ2（画像の上にグラデーションを重ねる）