Guymon

CSS: text-shadow und box-shadow

Nett:

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example:

p {
 text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

Cross-browser CSS box-shadows

Rustam Gaffanov stellt eine Cross-browser CSS box-shadow Möglichkeit vor, will sagen er zeigt wie es im IE < 9 funktioniert .

Ist nicht wunderschön, aber funktioniert und manchmal muss das Layout eben überall gleich aussehen.

Mit CSS3 wird alles einfacher

net.tutsplus vergleicht 11 “old-school” CSS/JavaScript Techniken und wie sie mit CSS3 umzusetzen sind.

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties.

Und hier die Demos:

1. Rounded Corners
2. Box Shadow
3. Text Shadow
4. Fancy Font
5. Opacity
6. RGBA
7. Background Size
8. Multiple Backgrounds
9. Columns
10. Border Image
11. Animations

Text Shadow für den IE

Da schau an, schon wieder etwas was ich nicht wusste: auch im IE kann man man einen Text Shadow erzeugen. Nicht schön, aber das ist ja nichts neues beim IE.

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX, OffY, Color, Positive,Enabled);

bzw.

filter:progid:DXImageTransform.Microsoft.Shadow(Color, Direction, Strength,Enabled);

Linkliste CSS Techniken

Praktische Link-Sammlung mit fast allem was in CSS gerade hip ist: CSS Sprites, CSS Rounded Corners, Image Replacements Technique, Sliding Doors, Image Text Wrap Technique, Equal Height Technique, CSS Shadows Techniques, CSS Transparency.