CSS Sprites: What They Are, Why They’re Cool, & How To Use Them

You’ve heard of them, but do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same […]

Posted by admin
On March 13, 2011
0 Comment

CSS: Clearing Floats with Overflow

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did […]

Posted by admin
On February 9, 2011
0 Comment

Stop Forking with CSS3

It seems like virtually every day there’s a fantastic new example of something amazing you can do with CSS3. Whether it’s as complex as full-blown animations or as (relatively) simple as RGBa colors, drop shadows, or rounded corners, I marvel at how far we’ve come since the lowly days of CSS1 or (shudder) the @font […]

Posted by admin
On June 29, 2010
0 Comment

Creating Fancy Checkmark Icons with Pure CSS3

I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted […]

Posted by admin
On June 17, 2010
0 Comment

CSS3 Gradient Buttons

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the […]

Posted by admin
On May 5, 2010
0 Comment

Create Resizing Thumbnails Using Overflow Property

Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it. OverviewWhat we have here is not actual image resizing. […]

Posted by admin
On February 8, 2010
0 Comment

How To Support Internet Explorer and Still Be Cutting Edge

Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers. But how do we actually do that? How do we create websites that are up to date with the latest coding […]

Posted by admin
On February 2, 2010
0 Comment

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

Posted by admin
On January 26, 2010
0 Comment

Scroll