Using CSS3 to produce an animated tabs menu with no images.

David Fasullo is an interactive designer from Toronto, Canada with a passion for communication arts and technology. By day, he's a digital art director. By night he plays drums and works on Livebrush, a motion-based drawing tool. In his interview to DesignInterviews he talks indepth about this application and gives valuable advice on day-to-day aspects of designer's work based on his 12 years of experience.

How to style the background image using CSS3 to make it fit the container size.

I'm probably way behind the curve on this one, but I recently realized the following:

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

That's handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example:

p {
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. A paragraph like this one.

Previously I might have created the drop shadow in Photoshop, then used the eye dropper tool to pull out the composited shadow hex value after the transparency was applied to the background colour. No more!

A flyline / dropdown menu with CSS3 enhancements for browsers that support animation.

A slide out menu with CSS3 enhancements for browsers that support animation.

Using the Fit and Shrink Technique to produce an image enlarger which does not need the image sizes to be defined.