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

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数429難易度(5.0) 645打 長文
簡単な解説付きでグラデーションをまとめ、個人練習用
グラデーションの方向や画像の上からのグラデーション、三色、四色のグラデーションのコードサンプルです。

関連タイピング

問題文

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

(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のタイピング

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

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード