CSS3 Patterns, Explained

14 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Stuart Robson

    What a great article. :o)

    A detailed explanation of how it works rather than leaving the lazy dev to copy and paste the code should help us all learn more.

    Thanks for writing not only the what’s and the how’s but also the why’s and (importantly) the why not’s.

    @24Ways that’s 16 out of 16, you’re on fire!!

  2. Nicolas Chevallier

    I think for now it is still quite complicated to set up this type of gradient, at least more complicated than with a visual editor. But I am sure that this type of editor will quickly emerge to manage the new CSS3 properties, gradients course, but also everything else. Once we have a real visual tool, these properties will be widely used.
    Anyway thank you for the explanation in a timely manner because this technique speeds up the loading of a web page.

    A question remains though: what about the consumption of resources to draw a CSS3 gradient vs. an image?

  3. Wayne McManus

    Echo what Stuart says, I feel like I understand it a lot better rather than just using it and expecting it to work.

    An article to this standard for each of the more complex CSS3 properties and we would all be a lot more enlightened!

  4. Lea Verou

    @Stuart, Webstandard-team, Wayne: Thank you so much!

    @Nicolas: Of course there is a performance hit when generating any kind of effect in the browser instead of including it as an image, not only with gradients. However, they usually make up for it by making the site download much faster. In my experience, the performance hit starts to be noticeable only when you have A LOT of gradients (e.g. in my patterns gallery) and a bit more easily on mobile.

  5. Niels Matthijs

    Always strive to make code that can be modified with the least number of edits.

    The patterns stuff is fun and all, but this is definitely the most interesting bit of this article. It Even deserves an article of its own if you ask me, simple as it may sound.

  6. Lea Verou

    @Niels: You’re right, it should. It’s a principle I follow heavily and it’s helped me in many cases that would otherwise be a maintenance nightmare. I’m not sure I can give advice about it though, most of it is different for each case. I’ll try to think about it though and maybe write an article in the future.

    @Theo: Thank you!

  7. Nicolas Chevallier

    Thank you Lea. However I wanted to know the impact on performance for mobile for example, which have less CPU and memory. There are other CSS3 properties or demos that are very greedy and finally unusable on prod environment. I think it’s far from the case with gradients but it’s always good to know the potential drawbacks.

  8. Mr C

    love the article, but you’re underselling the technique in the opening paragraph:

    “This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead.”

    css backgrounds scale on high ppi (retina) devices, whereas data uri jpeg/pngs don’t.

    developers can make good use of your background patterns, even without understanding how they work. of course it’s better to know how things work and this article helps enormously, but even without, there are benefits to be found.

    (aside: i guess an svg image as a data uri would also scale but i’ve yet to find a gallery of those as comprehensive as your pattern page)

  9. Chris Hester

    Good article, well explained!

    I found another neat trick CSS gradients give us. If one of the colours is set to “transparent” then it takes on the colour underneath. So you get a fade between the background colour and the gradient stop colour.

    My point though is this: could transparency be used over images? That might give us a way to fade them out at the top of a page, for example.

    Food for thought!

  10. Mike Han

    This will certainly be useful at overlaying polka dotted pattern over the full-screen stretched background of an image that is not hi-def enough, if that’s possible.

    Has any of you tried the patterns in combination with the URI background?

  11. Andrew Ckor

    Nice work Lea.

    One more nice tool that everyone can use alternative of prefix-free is http://prefixr.com/ that’s helps you generate quickly prefixes for all browsers.

Impress us

Be friendly / use Textile