http://www.w3schools.com/css3/

COM271, Week 12

CSS3

Syllabus | Table of Pages | Assignments | References and Useful Links

As with HTML5, you will want to keep up with developments of CSS3 as they flow from the W3C or off the press. The W3C's CSS3 page is www.w3schools.com/css3/default.asp. The A Book Apart series has a concise guide to many of the newer offerings: Dan Cederholm, CSS3 for Web Designers, 2010. 125 p.

Browser Support

New CSS3 properties are not yet a formal recommendation, but many of them are available in current browsers. Check the W3C's table of browser support,
www.w3schools.com/cssref/css3_browsersupport.asp
for a listing.

Border effects: There are two new border effects that are supported in current browsers (with a variation in Mozilla):

Here's a standard div used for layout.
Same div, with new effects included as style properties (style="border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */) Note the need for -moz- prefix for older Mozilla browsers.
Same div, now adding style="box-shadow: 5px 5px 3px #fcc;)

Text shadow: You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow: text-shadow: 3px 3px 3px #f33;

No more photoshop or CSS positioning tricks!

Note: Not yet in IE.

Check out the text-transform and other features by visiting the CSS3 site (left).

CSS3Tutorial

CSS3 HOMECSS3 IntroductionCSS3 BordersCSS3 BackgroundsCSS3 Text EffectsCSS3 FontsCSS3 2D TransformsCSS3 3D TransformsCSS3 TransitionsCSS3 AnimationsCSS3 Multiple ColumnsCSS3 User Interface

CSS3 References

CSS3 ReferenceCSS3 Browser SupportCSS3 SelectorsCSS3 Reference AuralCSS3 Web Safe FontsCSS3 UnitsCSS3 ColorsCSS3 Color ValuesCSS3 Color NamesCSS3 Color HEX