CSS、グラデーションまとめ【解説付き】

投稿者ueshin0620プレイ回数99
難易度(5.0) 645打 長文タグcss 個人練習用
簡単な解説付きでグラデーションをまとめ、個人練習用
グラデーションの方向や画像の上からのグラデーション、三色、四色のグラデーションのコードサンプルです。
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 まーらいおん 3401 D 3.7 90.9% 170.8 645 64 15 2021/11/22
2 むむむ 3161 E++ 3.6 88.9% 178.7 645 80 15 2021/11/23
3 ああああ 3023 E++ 3.4 88.7% 186.2 645 82 15 2021/11/27
4 ああああ! 3016 E++ 3.6 84.8% 175.7 645 115 15 2021/12/01
5 なーなーくん 2571 E 3.3 81.7% 194.8 645 144 15 2021/11/18

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(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(画像の上にグラデーションを重ねる)

◆コメントを投稿

※誹謗中傷、公序良俗に反するコメント、歌詞の投稿、宣伝行為は禁止です。

※このゲームにコメントするにはログインが必要です。

※コメントは日本語で投稿してください。

※歌詞のコメントは著作権侵害となります。投稿しないでください!

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表

人気ランキング

注目キーワード