Photoshopの透明背景っぽい背景をCSSで実装する方法

Photoshopの透明背景っぽい背景をCSSだけで実装する方法をご紹介いたします。↓こういう背景ですね。

以下にデモも用意しましたので、ご確認いただければと思います。ページを開くと全体がPhotoshopの透明背景っぽい背景になっています。

デモページを見る

Photoshopの透明背景っぽい背景をCSSで実装する方法

Photoshopライクな背景を実装したいところに、以下のようなCSSを指定すればOKです。

body {
 background-position: 0px 0px, 8px 8px;
 background-size: 16px 16px;
 background-image: -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),-webkit-linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc 100%);
 background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #ccc 100%);
}

上記ではbodyに対して指定していますが、特定の要素だけに指定することも可能です。

あとがき

Photoshopを利用している人にとっては、馴染みのある背景ですね。ちょっとしたアクセントなんかに良さそうな感じですが、いかがでしょうか。