box-shadow

Es gibt noch viel fantastischere Möglichkeiten für box-shadow, hier einige Anregungen.

Weicher Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>

• 1.1em = horizontale Verschiebung
• 1.2em = vertikale Verschiebung
• 1.3em = Unschärfe-Radius [Blur]
• royalblue = Schattenfarbe


Harter Schattten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>


4 Farben-Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>


Innerer weicher Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>


Innerer harter Schatten auf 2 Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>


Innerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>


Äußerer weicher Schatten auf allen Seiten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>


Äußerer weicher Schatten auf 1 Seite


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>


Transparenter Schatten


<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>


Schattiger Schatten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>


Ihr Kom­men­tar [Pos1] Sei­ten­an­fang

text-shadow

Beispieltext mit text-shadow


<div style="text-shadow: .1em .2em .3em #666; font-size: 2em; color: mediumvioletred;">Beispieltext mit <em>text-shadow</em>
</div>

• 0.1em = horizontale Verschiebung
• 0.2em = vertikale Verschiebung
• 0.3em = Blur [Unschärfe-Radius]
• #666 = Schattenfarbe
• mediumvioletred = Schriftfarbe


Beispieltext mit 2x Textschatten


<div style="text-shadow: 0 0 .5em red,.1em .1em .1em gold; color: white; font-size: 2em;">Beispieltext mit 2x Textschatten
</div>


Beispieltext im Vordergrund


<div style="text-shadow: .1em .1em .1em black; color: white; font-size: 2em;">Beispieltext im Vordergrund
</div>


Beispieltext mit Kontur


<div style="text-shadow: 0 -1px black,1px 0 black,0 1px black,-1px 0 black; color: white; font-size: 2em;">Beispieltext mit Kontur
</div>


Beispieltext im Inset


<div style="text-shadow: 0 -1px 1px black,0 1px 1px white; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Inset
</div>


Beispieltext im Outset


<div style="text-shadow: 0 -1px 1px white,0 1px 1px black; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Outset
</div>


Weitere Informationen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/


Ihr Kom­men­tar [Pos1] Sei­ten­an­fang

border-radius


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 2em 4em 6em;"></div>

border-top-left-radius: 0;
border-top-right-radius: 2em;
border-bottom-right-radius: 4em;
border-bottom-left-radius: 6em;


Border-Radius mit 1 Wert alle Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em;"></div>


Border-Radius mit 1 Ecke


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 4em 0;"></div>


Border-Radius mit 2 Ecken unten


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 6em 6em;"></div>


Border-Radius mit 2 diagonale Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em 0;"></div>


Border-Radius mit 2 unterschiedliche Werten in 2 Ecken


<div style="width: 24em; height: 4em; background: silver; border-bottom-left-radius: 6em 1em; border-bottom-right-radius: 2em 1em;"></div>


Border-Radius als Kreis


<div style="border-radius: 10em; height: 10em; width: 10em; background: silver;"></div>


Ihr Kom­men­tar [Pos1] Sei­ten­an­fang