Yum! Here… have a bite of some CSS3 PIE!

Yum! Here… have a bite of some CSS3 PIE!

I’ll be the first to admit, I’m a bit behind the average techy guru at picking up on new ideas and technology. I didn’t start REALLY getting into tweeting until this year, I just now hopped on board the “one-page jQuery scroll” train, & this summer was the first time I touched a WordPress theme. So some of you may say, CSS3 Pie, really? That’s been around for a while, where have you been?! Maybe it’s the midwesterner in me (we always have been a step behind), but either way, here I am now, excited to share a yummy surprise courtesy of Justin Hubbard on webdesign tuts+… Css3 PIE.


Well, maybe I should start that with, what is CSS3 in case you’ve been living under a rock the past year. CSS3 is the next step in CSS design. It allows you to create rounded corners, box shadows, gradients, rotate images, etc…. all with CSS. So no more creating a PNG button in Fireworks or Photoshop so you can have a drop shadow on it. No more creating a thumbnail of an image, deciding you want to rotate it a smidge, and having to open it back up in Photoshop, recreate it, reupload it, etc. Isn’t CSS3 grand?!
Well, not entirely. Unfortunately, it’s still being developed by W3C, so it’s not completely compatible with all browsers (although several modern browsers have implemented it). So for IE6-9, which is pretty much a thorn in the side of most web designers/developers, there’s something here to help, CSS3 PIE.
As stated on the CSS3 PIE website, “PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.” So all you really have to do is write your CSS3, download (then upload to your server) the free PIE.htc file, and at the end of your CSS statement put behavior: url(path-to-PIE.htc);. That’s it. Now, understand CSS3 PIE is a young project, so it’s not perfect, but it definitely helps clean up your CSS3 in IE.
CSS3 comparison
I’m in the process of putting together a landing page with CSS3 and HTML5, so I don’t have any live examples to share yet. However, if you visit the CSS3 PIE site they have demos and other sites that use CSS3/CSS3 PIE. You can also learn more about CSS3, including demos, quizzes, and tutorials on the W3C Schools website.

Leave a Reply

Your email address will not be published. Required fields are marked *