cssSandpaper – a CSS3 JavaScript Library

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE which doesn’t support it in IE natively but in other browsers which implement their own vendor-specific variants of these properties…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Specificity And Inheritance

Understanding a few often overlooked CSS concepts is important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Creating a Realistic Looking Button with CSS3

I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3. And this is what I ended up with…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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 some icons)…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Detecting device size & orientation in CSS

Gone are the days when we could safely assume that most our site visitors would have at least a 1024px-wide screen resolution. With smartphones and tablet computers on the rise, you visitors could also be browsing the web with screen widths ranging from 320px upwards. Does your site look good on a 768px-wide canvas? That’s how people will see it using a portrait-oriented iPad.

Time to revisit that old stylesheet of yours and give it a face-lift. Let’s jump straight into examples…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit…

VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

How to Dynamically Highlight Content Like Wikipedia Using CSS3

If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: 1 the link brings you to the footnote section at the bottom of the page; and 2 the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.This is a neat little technique that is accomplished easily using the CSS3 :target pseudo-class selector. Unfortunately, this is another CSS3 feature that has no support in Internet Explorer, and so has been largely overlooked up to this point but there are solutions for IE…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

Rounded corners on images, CSS-only

Admit it, even though rounded corners are widely seen as overused, you love playing with border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners.

For a project I’m working on, it would’ve been really nice having certain images displayed with rounded corners, so I started looking at the options…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Whenever you use :hover, also use :focus

Probably one of the most common accessibility oversights is neglecting to apply CSS to the :focus state of links whenever you style the :hover state. How much of a problem this oversight leads to for non-mouse users depends on what CSS is applied to the :hover state…

VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)

CSS3 Transforms & @font-face Experiment

This is the first of what I hope are number of experiments I plan on working on over the next few months, all in an effort to get acquainted with some of the new CSS3 features out in the wild that seem to be gaining some traction…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)