Resume: Additional notes 2
   

You have several options for including CSS3 in your designs. See the summary link from Webcredible (some follow-up links) and my demos here, from a Sitepoint course (paid) that I took. We will have more notes later from the Gillenwater text.

There are also "sandboxes" to play with some of the advanced stuff such as gradient:

Westciv's sandboxes: Text properties and gradients and transforms. See also this tutorial on the Apple nav bar. It uses images for the gradient—you might want to try using -moz-linear-gradient() or the Westciv sandbox to generate one.

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

1: Columns with @font-face (Google API), border-radius:, text-shadow: and box-shadow

2: Multiple text-shadow, rgba()
Note that box and text shadow are the same e.g.
-webkit-box-shadow: 1px 2px 3px rgba(55, 55, 55, .5)
-webkit-text-shadow: 1px 2px 3px rgba(55, 55, 55, .5)
where the parts in order are: X-offset Y-offset spread color

3: Circle using border-radius: button effect; raised button w/Unicode dingbat

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

5: multiple backgrounds

6: animation w/transform: scale and 3-D perspective: with in <img src="logo.svg">. And here is the same in HTML5 with <svg> directly in the HTML.

7: @font-face kit from Font Squirrel installed as local on server, PLUS Google API version.

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

9: The once-more ubiquitous ribbon effect.

 

Back to home page