Concentric Studio™ Box-shadow, one of CSS3′s best new features. Home / CSS3 Previews / Box-shadow, one of CSS3’s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box. In theory, the code for this is straightforward: But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit: How it Works The Syntax: box-shadow: none | [ , ]* = inset?
Examples: Creating a basic drop shadow Layering multiple shadows Example: Wonder-webkit. 365 Days of Astronomy. Awesome Overlays with CSS3's Border-Image Property - ZURB Playground - ZURB.com. 10 examples of futuristic CSS3 techniques. Pure CSS speech bubbles In a design, bubbles can be great to illustrate a quote. In this article, talented designer Nicolas Gallagher will show you what he built with CSS3: Text bubbles, with no Javascript or images. Source: Super Awesome Buttons with CSS3 and RGBA CSS has always been great to enhance buttons; but using CSS3, the RGBa property, and of course a lot of creativity, you can create modern and clean buttons.
The folks at Zurb will show you how in this great tutorial. Note that I enjoyed that technique so much that I used it on my own comment form! Source: Classy photo frame using CSS3 As I recently said on my other blog Cats Who Blog, images are very important in blogging, and in the Internet media in general. Source: CSS3 Drop down Menu Wow! Noupe.