Need a CSS3 generated background?
Do you have a CSS3 generated background you would like to share?
Whether you need a CSS3 pattern or want to share one, the CSS3 Patterns Gallery is for you!
You simply click on the pattern to expand and grab the code:
The big question is browser support:
The patterns themselves should work on Firefox 3.6+, Chrome, Webkit nightlies, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Opera doesn’t support radial gradients and Gecko is quite buggy with them).
Now, if you are interested in sharing your CSS3 masterpiece, here are the guidelines:
- Does it present a new technique?
- Is the number of gradients and color stops worth the effect? The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets. If your pattern needs a 2KB code for example (which becomes 10KB when used in production, due to all the prefixes), then it’s not very useful, except serving as a proof of concept.
- How common is the pattern?
- Very aesthetically pleasing patterns might be accepted, even if they don’t satisfy the above criteria, since they are useful for authors.
Remember as you go through the patterns, you can tweak both the colors and values to mix-it into your own flavor or suit your design needs.
[via Jared Erickson]
Speak your mind...