12th August 2012

Okay, so I’m guilty of not updating my blog for about a year, but it’s okay, I’ve got a helpful update for you today!

Last year I showed you all how to start using CSS3 today. A year later more browsers are supporting more CSS3 properties and with IE 10 on the horizon we will likely have all the browsers supporting a lot of key CSS3 properties such as transitions and animations.

That’s all positive, but the problem is different browser versions require the prefix, newer versions don’t. This is quite annoying to keep up with and write code for. There are a stack of CSS3 generators out there, the problem is when I’m writing code I know what properties I need and want to quickly stack them together and copy them into my stylesheet. A year and a half ago I built createcss3.com which was a CSS3 generator. Back then it was simple, it just supported a basic top to bottom gradient, border radius and outer box shadow for Firefox and Webkit.

I have had a few people in my ear telling me to update it recently so I gathered all the knowledge I have learned over the past 18 months and put that into what I believe is now the best CSS3 generator out there at the moment.

New Properties

There is a stack of CSS3 properties that are widely supported today by the key browsers, so I’ve taken all the properties I use that can fall back nicely if they’re not supported and stacked them in.

Properties include:

@font-face

Background Gradients (linear + radial)

Border Radius (new short code)

Box Shadow (both inset and outset)

Opacity

Text Shadow

Transform (rotate, scale, skew and translate)

Transition

I’ll be adding new properties over time.

Stacking

Pick and choose what properties you want then stack them together so you can quickly get the code you want copy it out and move onto the next one. Create CSS 3 is the only generator I can find that allows you to do it as quickly and easily as this. I’ve seen a lot of them too!

Smart Coding

A lot of generator will support inset or outset box shadows, the problem is they weren’t stackable, you’d have to manual put the code together to work which defeats the purpose of a generator. Create CSS3 will allow you to do both inset and outset on the one item with the correct code to do so. Same goes for the transform attributes.

Full Browser Support, Future Ready

Create CSS3 is one of the few generators that supports all 4 major browser engines (IE, Mozilla, Webkit and Opera) on every property where possible, and it generates the code so it’s ready for when IE10 brings it out. Better yet, it is one of the few generators that orders it’s code so that when prefixes are no longer required it will use the non-prefix code instead of the prefixed version. Believe it or not this is important.

Fallbacks

Create CSS3 will create fallbacks for things like the background gradients and opacity when they are not supported. This is quite important for these attributes.

RGBA & Hex

Okay, so I’ve never really used RGBA, but now I’ve realised it’s power it is hugely useful! RGBA allows you to put alpha on virtually anything. Backgrounds, borders, gradients, anything that has a colour. I’ve added RGBA support into everything, you can choose RGBA or Hex, whatever you feel like. Mix and match with different properties if you want.

Built for Developers

Almost every generator I’ve seen has annoying sliders and god knows what else to make it “easy” to generate the code. We’re developers though, generally we’ve got the design we just need to match what’s there. Let’s not mess around with sliders, let’s just enter the values we know from the designs and get on with it.

Preview

Some people like to see the preview, others don’t. The out of the way previewer allows you to choose if you want it open or not. Don’t want it? Keep it hidden out of the way. Want it? Show it.

As you can see I’ve put a lot of work into this new version to make it perfect for all your needs. Let me know what you think about it!

Comments

I am a designer who is jumping into the deep ocean of web design and I was wondering if you had any advice on where to start with CSS? Any books or sites that you could recommend would be very appreciated.

I also wanted to thank you for your CSS3 generator. Being able to see instantly the results has explained a lot to me. Your hard work helps all of us who strive to learn more.