Create a CSS3 Image Gallery with a 3D Lightbox Animation
April 19th, 2011 — 14 Comments
For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.
Use CSS3 Now!
January 11th, 2011 — 30 Comments
I posted a quick tutorial yesterday showing how to use a simple CSS3 technique to spin some icons on hover. I’ve posted CSS3 tutorials before but all of a sudden this latest one has already received a few negative comments complaining that they can’t use CSS3 yet. Of course you can! Get over the way you used to do things, move with the times and embrace the new hotness right now. Today.
Read more...Hardboiled CSS3 Media Queries
October 12th, 2010 — No Comments
Andy Clarke offers a comprehensive starting point for media queries based on the specs of different devices such as smartphones and iPad as well as varying screen sizes. Apparently they’re part of a wider toolkit that he’ll be releasing with his book coming soon which is almost certainly going to be worth the wait.
Read more...Ultimate CSS Gradient Generator
October 6th, 2010 — No Comments
A gradient generator web app that mimics Photoshop’s gradient creation tool. Could do without the IE filter though. If you really have to use a gradient for IE, just write a conditional comment and only let IE users clock up another HTTP request.
Read more...Writing Clean CSS3 Code [updated]
September 1st, 2010 — 50 Comments
One of the main problems with writing CSS3 code are the vendor prefixes. These are the -moz- or -webkit- you see before properties such as border-radius or text-shadow. They’re a necessary evil at worst and you’ll have to use them to get the most out of what CSS3 currently has to offer.
So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.
Use of CSS3 Goodness for GMail on the iPad
August 19th, 2010 — No Comments
An interesting note when writing translations in CSS3 for the iPad:
Read more...… it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated
translate3d(x, y, 0)transform instead of a non-hardware acceleratedtranslate(x, y)transform.
Browser Prefixes aren't as Evil as you Think
July 7th, 2010 — Comments Off
Eric Meyer’s excellent thoughts on why browser prefixes are not as bad as some people make them out to be and I completely agree.
Read more...So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. And in this case, you’re being vaccinated against a bad case of multi-year parser hacking and browser sniffing. We suffered through that long plague once already. Prefixes will, if used properly, ward off another outbreak for a long time to come.
