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

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

Photoshopの透明背景っぽい背景をCSSで実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 初心者におすすめのクレジットカードランキング
  • このエントリーをはてなブックマークに追加

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

Photoshopの透明背景っぽい背景

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

デモページを見る

スポンサードリンク

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

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

body {
background-position: 0px 0px, 8px 8px;
background-size: 16px 16px;
background-image: -webkit-linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc 100%),-webkit-linear-gradient(45deg, #ccc 25%, white 25%, white 75%, #ccc 75%, #eee 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を利用している人にとっては、馴染みのある背景ですね。ちょっとしたアクセントなんかに良さそうな感じですが、いかがでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。