Controlling width with CSS3 box-sizing

An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not.This is useful since it makes it much easier to define flexible widths where you also need padding […]

How To Use CSS3 Pseudo-Classes

We can use pseudo-classes to style content dynamically. CSS pseudo-classes come in four groups: structural pseudo-classes, pseudo-classes for the states of UI elements, a target pseudo-class and a negation pseudo-class. This in-depth article explains how and where to use them effectively…

iPad Orientation CSS (Revised)

Alternative to Cloud Four’s demonstration on how to serve up iPad stylesheets based on device orientation…

CSS3 linear gradients

An in-depth article on CSS3 gradients that explains how to use linear and repeated linear gradients for all modern browsers…

Flexible height vertical centering with CSS, beyond IE7

How to center something both horizontally and vertically with modern browsers (apart from IE7 and older). The technique uses display:table but there is one thing to be aware of before implementing…

CSS Typography: The Basics

Good typography is not only imperative for aesthetic appeal, but also improves site usability when text legibility and readability concepts are applied. Typography is all about proportions and spacing. There are also font styles to consider. How can we use CSS for great typography in our web designs? This is a question we’ll try to […]

Nonintrusive CSS Text Gradients

Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes…

CSS Floats 101

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using […]

My New Best Friend: CSS Generated Content

I’ve become obsessed with generated content lately. In an effort to use fewer and fewer images, I’ve started to use generated content more since more browsers support it IE8+, FF3+, Safari 4+, Chrome 4+. The following are a couple of examples I have built for a project to streamline my pages…

The Font-Face Rule and Useful Web Font Tricks

The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to […]

« Previous PageNext Page »