archive: November 2009

24
NOV
2009

CSS3: Live on my site!

Posted by Shane

For a while I been using images and very weird code to make all my designs have rounded corners. I have ditched that and moved onto CSS3. Most of my visitors are on either Firefox or Safari so I don’t expect this to impact a lot of you. For those on IE7 and below (Down with IE6).. I am sorry. It was nice while it lasted! :)

The main change to the entire theme is that the rounded features are all done with CSS3. The header that now separates each blog post has more detail. One of the cool features now that instead of the ‘Page Navigation’ showing up in the box itself, it shows in it’s own tab that is “hooked” on to the blog header part. This goes the same for pages where the original creation date, modification date, author, and ‘Edit’ link (For Admin Only).

In this redesign however, I did find a few WordPress functions that I think need modifying. Very minor changes to their use and maybe at lease one more. That being called ‘the_page_number’ so I can output the current page number in a tab. Also some images/icons are going to be replaced with new and improved versions.

My header will not work and I made the index page very simple as I do not have enough time right now to finish. So we are not 100%, but like 99.8% done.

I like to thank Andres Armeda (@dremeda) for helping me through the really tough CSS code that I needed help on stuff I could not figure out. I have never been very good at CSS, but I think I got it after everything has been rewritten from scratch — including the XHTML code. The Firebug Mozilla Firefox plugin also helped. If you never used it before.. get it here. Well worth installing if you are a WordPress developer – theme or plugin.

Enjoy the new design!

Comments 5

Commenting is now closed

I’ve been using CSS3 over images to do rounded corners for quite some time now. As long as the site still looks acceptable in IE, that’s all that matters. Recently I’ve started using box-shadow instead of images as well. Works out really nice. The radial gradient is next on my list.

It does. All squared edges instead of rounded edges, but still looks pretty good.

Right now I have no need to for box-shadow. I have it in my jQuery Overlay, but that’s about it.

It’s way better to have a good design without a bad code. I really enjoy since many years the use of border-radius. It’s the best property ever. Hopefully, IE6 and 7 are going to be out in a short time (IE8 is on rails already).

@xethorn (about, flickr)