Quickie CSS3 Tricks with Fallbacks

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver […]

Mobile Optimised Websites Using CSS3 Media Queries

CSS3 Media Queries can be used in conjunction with CSS 2.1 Media Types to target mobile users with a set device size or screen dimension. Using these queries, you can provide optimised CSS style sheets that are tailored to a particular size of device…

CSS3 Hover Tabs without JavaScript

With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover…

Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page. As CSS3 gets closer to becoming the new […]

Modern CSS Layouts: The Essential Characteristics

We won’t talk about design trends and styles that characterize modern CSS-based layouts. These styles are always changing. Instead, we’ll focus on the broad underlying concepts that you need to know to create the most successful CSS layouts using the latest techniques. For instance, separating content and presentation is still a fundamental concept of CSS […]

How to Achieve Cross-Browser @font-face Support

At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers…

Screencast: Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit […]

Easily Turn Your Images Into Polaroids with CSS3

Yesterday, Jon and I were going back and forth about what to blog about next. Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!

Becoming a Font Embedding Master

I’ve spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process. Here’s the findings…

Interactive CSS3 Generator

Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge. Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show […]

« Previous PageNext Page »