CSS Head

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…

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…

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…

A useful online tool to format and optimize your CSS files. Lots of options that enable full control of the process…

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…

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…

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…

Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started…

I’ve come across a few techniques and tips in my career, and one of them is this neat trick to create triangles in CSS. Little people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that…

If you are a freelance developer then saving time always works in your favor. One way to help you save time, especially if like me, you find yourself doing a lot of the same kind of work over and over, is setting up templates. In the case of web development, having a customized template for your CSS stylesheet can save you from repetitiously typing the same bits of code that you include in most of your web dev projects…