biohazard-pattern

My own attempts to build CSS3 patterns

I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).

One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.

Here’s how some of them look like:

CSS3patterns by Lea Verou

Making some of my own was the next step. It’s a great way of learning the specs a bit better cause I must confess I never read them properly and never bothered with the small details.

I did not have to build patterns before and I am almost certain I won’t have to do that in the near future but maybe you’ll have to and these small chunks of code will inspire you to build something and learn the tricks yourselves.

Here’s what I did:

Violet flowers

violets pattern

The code is quite simple actually, I wanted to make the flowers with radial gradient and choose some fancy gradient inside but I could not find the right colors so in the end the code looks like this:

background:
radial-gradient(circle, #21052D, #21052D 8px, transparent 8px) -14px 35px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -3px -30px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -5px 25px,
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -23px -30px, 
radial-gradient(circle, #270A33, #270A33 14px, transparent 14px) -23px -49px;
background-size: 67px 75px;
background-color: #20052B;

Add the vendor prefixes yourselves. Adding all of them here myself would have cluttered the page and made your understanding of it quite impossible. It won’t work the way it is written right now, it needs the vendor-prefixes. (CSS PIE with radial gradient did not seem to work in older versions of IE but the page degrades to a nice solid violet color as a background which is still ok with me)

The cools stuff is that you can increase or decrease the size of the flowers just by multiplying the numbers in there. I mean all of them. Be aware that small flowers won’t display as well, browsers struggled a little displaying them half this size.

Bio hazard

bio hazard CSS3 pattern

This one is a bit more complex, a mix of radial and linear gradients so you’ll just have to take it as it is:

background:
radial-gradient(circle, black 10px, transparent 10px) -25px 75px,
radial-gradient(circle, yellow, yellow 13px, transparent 13px) -25px 75px,
linear-gradient(300deg, black 22px, transparent 22px),
linear-gradient(60deg, black 22px, transparent 22px),
linear-gradient(300deg, black 22px, transparent 22px) 42px -25px,
linear-gradient(60deg, black 22px, transparent 22px) 42px 25px,
linear-gradient(300deg, black 22px, transparent 22px) 42px 25px,
linear-gradient(60deg, black 22px, transparent 22px) 42px -25px,
linear-gradient(120deg, yellow 22px, transparent 22px) 86px 0,
linear-gradient(240deg, yellow 22px, transparent 22px) 86px 0,
linear-gradient(120deg, yellow 22px, transparent 22px) 43px 25px,
linear-gradient(240deg, yellow 22px, transparent 22px) 43px 25px,
linear-gradient(120deg, yellow 22px, transparent 22px) 43px -25px,
linear-gradient(240deg, yellow 22px, transparent 22px) 43px -25px,
radial-gradient(circle, black , black 28px, transparent 28px) -10px -49px,
radial-gradient(circle, black , black 28px, transparent 28px) -54px 75px,
radial-gradient(circle, black , black 28px, transparent 28px) -10px 49px;
background-size: 135px 150px; 
background-color: yellow;

As same as with the flowers, add the vendor prefixes to make it work in your browsers, scale it if you need to and yes, CSS PIE won’t work. Sorry about that.

I wonder if somebody will have the time to do a Christmas tree with bubbles :)

One thought on “My own attempts to build CSS3 patterns”

Comments are closed.