CSS

I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color skins. It is particularly useful for creating customizable and dynamic templates (see demos).

Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn’t, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.

While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action.

View Demo Elastic Videos

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 & CSS3 media queries.

View Demo Responsive Design

Download Demo ZIP

As much as we don’t like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…

View Demo IE Specific

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.

View Demo Clear Floats

«< 3 4 5 6 7 >»

7th Anniversary: 50% off all WordPress themes and plugins at Themify.