Category Archives: Tutorials

CSS Sprites with Inline Images

Posted on by

CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times.The “sprite” is the single, combined graphic. We can use this same theory, only instead of using background-image to show the graphic, we can use an image right in the HTML itself inline image…

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

Direct link: CSS Sprites with Inline Images

CSS Image Maps: A Beginner’s Guide

Posted on by

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp.

In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup…

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

Direct link: CSS Image Maps: A Beginner’s Guide

CSS Font-Sizing: a Definitive Guide

Posted on by

Font sizing in CSS sounds as though it should be easy. Until you try it. Many developers use the force; they tinker with the font-size property until it looks right only to find it’s different in another browser. A little understanding can go a long way…

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

Direct link: CSS Font-Sizing: a Definitive Guide

Taming Advanced CSS Selectors

Posted on by

CSS is one of the most powerful tools that is available to web designers (if not the most powerful). With it we can completely transform the look of a website in just a couple of minutes, and without even having to touch the markup. But despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans…

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

Direct link: Taming Advanced CSS Selectors

Create a Letterpress Effect with CSS Text-Shadow

Posted on by

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here…

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

Direct link: Create a Letterpress Effect with CSS Text-Shadow

Sexy HTML List Tricks

Posted on by

Behold the ubiquitous list elements, “ul” and “ol”!

These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable…

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

Direct link: Sexy HTML List Tricks

Building Faster Websites with CSS Sprites

Posted on by

Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. In other words, when you have many images to be used, instead of having them as different individual files, we combine them into one. Therefore, the client computer only downloads one image for all the different graphics to be displayed…

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

Direct link: Building Faster Websites with CSS Sprites

8 Good Examples of Using CSS z-index Property

Posted on by

If you are new in CSS then you may find it difficult to understand the CSS z-index property. In simple words z-index sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order. Here are some examples to explain how the z-index property works…

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

Direct link: 8 Good Examples of Using CSS z-index Property

Making Hyperlink Icons with CSS

Posted on by

Hyperlinks can link to any number of different sources (pdfs, emails, external links, popups). By placing an icon beside each of these types it will take the surprise out of clicking on a hyperlink for the user. The plan is to do this in an intelligent manner so users don’t have to worry about placing a class on each link. This is especially handy if you’re building for CMS users that aren’t HTML savvy…

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

Direct link: Making Hyperlink Icons with CSS