Retro futurist poster tutorial from blog.spoongraphics


Today, I followed this tutorial from Chris Spooner’s blog.
I had a lot of fun doing it!

PSD to WordPress for a catering business

wordpress theme for a catering businessA client came to me with a website design in Photoshop and I converted it to a WordPress theme.
I enjoyed creating the theme as it was quite challenging, and I learned a lot about creating child themes for the Hybrid framework.
This is my fifth Hybrid child theme.
The homepage has a featured post area, a latest posts area, all widgetized and easily editable from the admin panel.
There are different page layouts, 1,2 & 3 columns.
I used the widgets logic and query_posts combo extensively which allows a lot of control from the admin panel, which is one of my goals when creating a theme. I try to make everything dynamic and editable.

IE transparency and font rendering

While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:

.content, #primary {
       background:transparent;

     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);

	}

.page-title, .singular-page-title {
	       background:transparent;

                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}

This is the result:

You can see that the result is not very pretty! The font doesn’t seem to render very well.

I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:

Much better!

Conclusion: I’ll use the PNG fallback method.

Have you experienced this issue? Is there a fix?
Leave your comments!