10/6/11

You have several options for including CSS3 in your designs. See the summary link from Webcredible (some follow-up links) and these YouTube videos from John Allsopp of Westciv which publishes the SitePoint stuff (I took their course; I'll post some of my demos here). Finally there are "sandboxes" to play with some of the advanced stuff such as gradient: .

1. text-shadow:
2. text-stroke: (and vendor extensions)
3. box-shadow:
4. rgba()
5. columns
6. border-radius:
7. gradient:
8. @font-face:
9. multiple backgrounds
10. 2-D transform:

Westciv's sandboxes: Text properties and gradients and transforms. See also John Allsopp's tutorial on the Apple nav bar.

My demos (Firefox= -moz or Safari/Chrome= -webkit.)

1: Columns with @font-face, border-radius:, text-shadow: and box-shadow

2: Multiple text-shadow, rgba()

3: Circle using border-radius: button effect

4: opacity: with transform: and transition: (-webkit only)

5: multiple backgrounds (-webkit only)

6: animation w/transform: scale and 3-D perspective: (-webkit only). Right now the SVG won't load online, although you can see it here.

7: @font-face kit from Font Squirrel installed as local on server.

8: simulation of Apple nav bar based on Allsopp's blog tutorial (-webkit).