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…
Archive for August, 2009
-
CSS Sprites with Inline Images
Posted: 11 months ago in Tutorials
Read More: CSS Sprites with Inline Images
-
CSS Image Maps: A Beginner’s Guide
Posted: 11 months ago in Tutorials
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…
Read More: CSS Image Maps: A Beginner’s Guide
-
CSS Font-Sizing: a Definitive Guide
Posted: 11 months ago in Tutorials
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…
Read More: CSS Font-Sizing: a Definitive Guide
-
Simple Cross-Browser Transparency with CSS
Posted: 11 months ago in Code
Simple CSS code for Transparency setting for all browsers, IE, Firefox, Opera, Safari and Google Chrome…
Read More: Simple Cross-Browser Transparency with CSS
-
Web fonts and standards
Posted: 11 months ago in Articles
It remains to be seen whether a font-licensing standard and universal browser support for @font-face will kill the middlemen, or whether the middlemen will prove so successful that they delay or stifle the adoption of a font-licensing standard and allow Microsoft to shrug its shoulders indefinitely at supporting @font-face for anything beyond its proprietary EOT file format…
Read More: Web fonts and standards
-
Taming Advanced CSS Selectors
Posted: 11 months ago in Tutorials
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…
Read More: Taming Advanced CSS Selectors
-
Create a Letterpress Effect with CSS Text-Shadow
Posted: 11 months ago in Tutorials
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…
-
Sexy HTML List Tricks
Posted: 11 months ago in Tutorials
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…
Read More: Sexy HTML List Tricks
-
Divine CSS
Posted: 11 months ago in Galleries
The Divine CSS website showcases some of the world’s best designed websites (Flash & CSS) from around the world. The team at Divine CSS are made of a mixture of graphic and web designers, programmers and developers with a combined 25 years experience in the industry.
Read More: Divine CSS
-
Building Faster Websites with CSS Sprites
Posted: 12 months ago in Tutorials
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…
Read More: Building Faster Websites with CSS Sprites