CSS Image Replacement with pseudo-elements (NIR)

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7…

Multiple Backgrounds and Borders with CSS 2.1

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required…

SuperStretch! – A Vertically Fluid Layout Using CSS

Here’s a technique I created a while back that I have revisited and tidied up a bit. It results in a layout that stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8…

CSS Hover Controls On the iPhone

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links – a way to simplify your interface…

Beautiful CSS3 Search Form

Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and […]

CSS3 Buttons

A demo page with a set of beautiful CSS3 buttons by Nick La of WebDesignerWall…

Create Windows 7 start menu using CSS3 only

I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and […]

CSS for the iPad

The iPad is coming and the developers already received the iPhone Simulator Extension. The new XCode beta also includes Safari Mobile. If you want to use a CSS modification for the iPad as I do, this is how you tell the iPad to use an additional CSS file…

CSS 100% Height

A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, but I came up with one that is my personal favorite, which I will share with you today…

« Previous PageNext Page »