Category: Tutorials

CSS3 box-shadow and Image Hover Effects

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser […]
csshead 0 Comments

The Mysterious Pseudo Class in CSS

Pseudo classes are those things with colons in them, you know, like :hover or :link. They let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce a ton of new pseudo classes, and they’re going to make our […]
csshead 0 Comments

CSS Transitions 101

Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from […]
csshead 0 Comments

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. […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

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 […]
csshead 0 Comments

Creating Triangles in CSS

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…
csshead 0 Comments
« Previous Page — Next Page »