CSS3 Shadows

Grundarchitektur: Box-Shadow

Mindestangaben 2px 2px #000

Weichzeichnung 2px 2px 5px #000

Radius 2px 2px 0 2px #000

Inset inset 2px 2px 2px #000

box-shadow: 2px 2px #000;
box-shadow: 2px 2px 5px #000;
box-shadow: 2px 2px 0 2px #000;
box-shadow: inset 2px 2px 2px #000;

Grundarchitektur: Text-Shadow

Webkrauts

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

Schatten mit border-radius

Webkrauts

box-shadow: 2px 2px 3px rgba(0,0,0,.4); border-radius: 20px;

HEX vs. RGBA

HEX

RGBA

box-shadow: 5px 5px 2px 1px #777;
box-shadow: 5px 5px 2px 1px rgba(0,0,0,0.6);

Mehrere Schatten

Webkrauts

Webkrauts

text-shadow: #666 4px 4px 3px, #aaa -4px -4px 3px;
text-shadow: #888 1px 1px 1px, #888 2px 2px 1px, #888 3px 3px 1px, #888 4px 4px 1px;

Eingedrückter Text

Webkrauts

background: #B54;
color: #522;
text-shadow: rgba(255, 255, 255, 0.15) 1px 1px 0px;

Foto: Magic Forest by Stella VM (CC BY-NC-SA)