CSSグラデーションで作った背景パターンのサンプル - NxWorld

CSSのグラデーションはよく見る単純なグラデーションを作るだけでなく、記述の仕方によって様々な見栄えをつくることができます。 画像で切り出してしまった方が圧倒的に早く実装できるような場合も正直ありますし、古いIEをサポートするために使えなかったりもしましたが、最近では旧ブラウザをサポート対象外にすることも多くなってきて今後ますますレスポンシブやRetinaディスプレイなどを考慮して使う機会が増えるように思うので、利用する機会が多いと思う背景パターンをCSSのグラデーションを使っていくつか作ってみました。 ここでの表示は全てイメージになるので、実際の表示は以下デモページをご覧ください。

[tailtame]

ドットがシビアだな…デモだと四角い。Ctrl++で丸くなる(｀・ω・´)

[idr_zz]

グラデだけじゃない！CSSグラデの模様、多彩だなぁ CSSグラデーションで作った背景パターンのサンプル | NxWorld

[torimoku]

ストライプ・チェック・水玉・菱形、和柄っぽいのまで

[cibea]

すごすぎ

[sutara_lumpur]

#CSS でここまでできるんですね (-人-)

[m-nakamata]

フロントできないから

[shinagaki]

画像使うのとどっちがリソース的に有利なんだろ

[lordnoesis]

我が家のトイレの床があった。

[kagioo2uma]

ドットパターンもできるんだ　表現力広がるなー

[tettekete37564]

最近はこんなことも出来るのか

[coolworld]

ギンガムチェックやってみたい

[nami-hey75]

ドットもできるんだ

[hayashihayashi]

なるほど。

[tihata]

チェックとか使ってみたい