画像を使わないPureCSSでつくる背景パターンを集めました -『CSS』

table of contents

    CSSのbackgroundを駆使して描く、画像を使わない背景パターンのアイデアをまとめました。

    なんらかのパターンをくりかえす背景は、画像で指定した方が実装しやすいということはありますが、レスポンシブデザインやRetinaディスプレイなどの高解像度ディスプレイを考慮していくと、CSSだけで実装できるものはCSSに任せてしまう方がいいのではないかと思います。
    また、CSSで指定することにより動的な表現を美しく実装することも可能になり、表現の幅が広がります。

    CSS3 Patterns Gallery

    かなり豊富に背景パターンがまとまっています。
    サムネイルをクリックすると、その背景柄のページに遷移して、実際のコードを見ることができます。
    CSS3 Patterns Gallery

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

    細かく実装のためのtipsが掲載されていて、どうやって複雑なパターンを実装すればいいのかがわかりやすくなっています。
    自分好みの背景を作成する参考になります。

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

    おわります。

    画像を使わないPureCSSでつくる背景パターンを集めました -『CSS』のアイキャッチ画像

    share

    related