Schlagwort: CSS

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>

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/

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>

Farben im Web

Allgemeines
Farbe ist das menschliche Empfinden von Lichtvariationen innerhalb von Helligkeitswerten. Zudem gilt, je heller oder dunkler, als das normale Tageslicht, umso weniger Farben können unterschieden werden. Bisher war für die Farbbildung entscheidend, wie die Oberfläche eines farbreflektierenden Objektes beschaffen ist. Seit es Fotografie und andere moderne bilderzeugende Methoden existieren, werden chemische und elektrische Prozesse genutzt, um auch selbstleuchtende Oberflächen zu schaffen.

Inhaltsverzeichnis

Farben im Web weiterlesen