CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects…

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

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Yes, it’s possible to create a simple and nice 3D layout playing with some CSS3 stuff, only using code and without the help of Photoshop. We want to make 3D elements without images. There are some properties of the CSS3 languages that can help us to accomplish this mission. We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds…

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

CSS Selectors and Pseudo Selectors and Browser Support

The following is a range of CSS tests of the most common browser support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future CSS3…

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

The importance of the !important CSS declaration

The !important declaration has been valid since CSS1 but it seems to have acquired a bad reputation over the years. Even if the !important declaration should be used with caution, it’s a very useful and powerful expression that much deserves its place in our CSS world. This article offers a guide to what the declaration is, what it does and how you should use it…

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

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new & improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me. Using CSS3′s new support for multiple background images, we can use a single, existing element to preload all of the required images…

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

How to Create a Cool Anaglyphic Text Effect with CSS

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup…

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

Extending CSS with jQuery

Before we leap in, let’s take a look at why jQuery has come to be the most widely adopted of JavaScript frameworks. First, it’s extremely designer friendly. You’ll see some standard CSS mark-up – hover conditions, list elements – defining styles is very much a static process, but jQuery allows you to easily and instantly add or remove classes, conditions, functions and more to any element on your page so that it takes CSS to the next level – interactivity. jQuery also has a very short learning curve which as some of us know has meant that creating effects like boxes sliding up or down a page child’s play…

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