カテゴリ一覧

PATTERN

CSSだけで作る背景の模様

画像ファイルを使わず、CSSのグラデーションだけで描いた背景の模様です。色・マスの大きさ・線の太さを変えても、くっきりきれいに表示されます。

13種類

方眼

  • CSSのみ
  • 線

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

水玉

  • CSSのみ
  • ドット

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

小さな点の格子

  • CSSのみ
  • ドット

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

ギンガムチェック

  • CSSのみ
  • チェック

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

市松模様

  • CSSのみ
  • チェック

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

ジグザグ

  • CSSのみ
  • 線

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

2色のグラデーション

  • CSSのみ
  • グラデーション

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

ふんわりメッシュグラデーション

  • CSSのみ
  • グラデーション

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

ゆっくり動くグラデーション

  • CSSのみ
  • グラデーション
  • 自動で動く

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。

ざらざらした紙

  • CSSのみ
  • 質感

見本では section に付けていますが、body やBOXなど、どの要素にも使えます。最後の「見本用の余白」は不要なら消してください。 ざらざらは画像ファイルを使わず、CSSの中に書いたSVGで作っています。