CSS Backgrounds and Borders Module
Kosta’s contribution

Table of contents

* 1. Introduction
* 2. Values
* 3. Background properties
o 3.1. Layering multiple background images
o 3.2. The ‘background-color’ property
o 3.3. The ‘background-image’ property
o 3.4. The ‘background-repeat’ property
o 3.5. The ‘background-attachment’ property
o 3.6. The ‘background-position’ property
o 3.7. The ‘background-clip’ property
o 3.8. The ‘background-origin’ property
o 3.9. The ‘background-size’ property
o 3.10. The ‘background’ shorthand property
o 3.11. The backgrounds of special elements
* 4. Border properties
o 4.1. The ‘border-color’ properties
o 4.2. The ‘border-style’ properties
o 4.3. The ‘border-width’ properties
o 4.4. The ‘border-radius’ properties
+ 4.4.1. Corner Shaping
+ 4.4.2. Corner Clipping
+ 4.4.3. Color and Style Transitions
+ 4.4.4. Overlapping Curves
+ 4.4.5. Effect on Tables
o 4.5. The border shorthand properties
* 5. Border Images
o 5.1. The ‘border-image-source’ property
o 5.2. The ‘border-image-slice’ property
o 5.3. The ‘border-image-width’ property
o 5.4. The ‘border-image-outset’ property
o 5.5. The ‘border-image-repeat’ property
o 5.6. Border-image drawing process
o 5.7. The ‘border-image’ shorthand
* 6. Miscellaneous Effects
o 6.1. The ‘box-decoration-break’ property
o 6.2. The ‘box-shadow’ property
* 7. Definitions
o 7.1. Glossary
o 7.2. Conformance
o 7.3. Levels
+ 7.3.1. CSS Level 1
+ 7.3.2. CSS Level 2
+ 7.3.3. CSS Level 3
o 7.4. CR exit criteria
via CSS Backgrounds and Borders Module Level 3.

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.

For anyone not using those browsers, here is a reference image (from Opera 9.5):

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

via Text-shadow, Photoshop like effects using CSS – CSS3 . Info.

50 New Useful CSS Techniques, Tutorials and Tools

via 50 New Useful CSS Techniques, Tutorials and Tools – Smashing Magazine.