chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2015/01/05

[CSS3]CSS3だけで作る背景パターン「CSS3 Patterns Gallery」

CSS3のみで作る背景パターンを紹介をしているサイト「CSS3 Patterns Gallery」複雑の図形もたくさんあり、グラデーションを上手く使用しており非常に勉強になりました。ライセンスがいまいち把握出来ず。。参考にどうぞ!

CSS3だけで作成する背景パターン

CSS3を上手く使い、背景パターンをたくさん紹介しているサイト「CSS3 Patterns Gallery」をご紹介致します。

複雑な図形などもあり、CSS3のグラデーションの使い方の勉強にもオススメです!

下の画像はタータンチェックの模様をCSS3のみで再現しており、コードも全て載っております。すごい。。

css-patterns-2-compressor

画像は表示速度の部分に大きく関係してきますので、CSSのみで再現出来るものはなるべくCSS側で処理したいものです。

また色々な種類のパターンがありますので見ているだけでも、なるほどな〜となってました。

 

対応ブラウザはCSS3が対応しているFirefox,Chrome,Opera,Safari,IE10+となっております。

ライセンスは https://github.com/LeaVerou/css3patterns/blob/master/license.txt

こうなっており、ごめんなさい。いまいちわからなかったです。。(そのまま使う場合は、クレジットが必要のような・・・)

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加