CSS3 wird ein Segen für Webdesigner und vor allem -entwickler. Mit der CSS-Eigenschaft box-shadow lassen sich ohne jede Grafik Schatten um Block-Level-Elemente werfen. Wer jedoch gleiche Darstellung in alles Browsern anstrebt, sollte box-shadow mit Vorsicht genießen. Hier ein paar Experimente.

CSS-Eigenschaft box-shadow

Neben dem bereits vorgestellten text-shadow gibt es auch einen CSS-Befehl der uns Schatten um Block-Level-Elemente (z. B. div) werfen lässt. Die CSS3-Eigenschaft box-shadow.

Ich sag’s am besten gleich. Der IE spielt hier nicht mit! In einem gewissen Rahmen lässt auch dieser sich den Boxschatten aufzwingen, jedoch wird dieser weitaus weniger schön gerendert.

Aber auch die Webkit-Fraktion (Safari/Chrome) und der Firefox spielen nur mit den Prefixen -webkit bzw. -moz mit. Wer also auf CSS-valides Entwickeln pocht, kann das Weiterlesen ab sofort einstellen.

Sprungmarken

• Die Schreibweise
• Beispiele einfacher Boxschatten
• Beispiele innerer Boxschatten
• Beispiele für Boxschatten mit Radius
• Beispiele mehrfacher Boxschatten
• box-shadow im IE (Internet Explorer)

Die Schreibweise

.shadow {
    -moz-box-shadow: 2px 2px 2px 2px #eee;
    -webkit-box-shadow: 2px 2px 2px 2px #eee;
    box-shadow: 2px 2px 2px 2px #eee;
    /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */
}

Bemerkung:
Der erste Wert von box-shadow gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert den Grad der Unschärfe des Schattens, der optionale vierte Wert bestimmt den Schattenradius und die letzte Angabe ist der Hex-Code der gewünschten Farbe des Schattens.

Beispiele einfacher Boxschatten

Mit box-shadow lassen sich ohne jegliche Grafiken verblüffende Effekte erzeugen.

Das CSS dazu

-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;

Allein diese Parameter versprechen schon eine unheimliche Vielfalt, um Block-Elemente in unseren Webdesigns plastischer erscheinen zu lassen.

Das CSS dazu

-moz-box-shadow: 1px 1px 0px #000;
-webkit-box-shadow: 1px 1px 0px #000;
box-shadow: 1px 1px 0px #000;

Auch wenn es hier noch rudimentär erscheint. Mit dem Spiel der Offsets (Versätze), dem Blur (Unschärfe) und der Farbe lässt sich sehr leicht Perspektive erzeugen.

Das CSS dazu

-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
box-shadow: 0px 0px 2px #000;
border: 1px solid #fff;

In Kombination mit dem normalen border lassen sich perspektivisch ausgefeiltere Ergebnisse erzielen.

Das CSS dazu

-moz-box-shadow: -5px -5px 5px #ddd;
-webkit-box-shadow: -5px -5px 5px #ddd;
box-shadow: -5px -5px 5px #ddd;

Negativer Versatz ist ebenfalls möglich. Damit können wir die Lichtquelle und somit den Schatten beliebig steuern.

Beispiele innerer Boxschatten

Die CSS-Eigenschaft box-shadow hat einen weiteren interessanten Parameter. Mit der Angabe inset können Boxschatten auch nach innen dargestellt werden.

Das CSS dazu

-moz-box-shadow: inset 2px 2px 5px #000;
-webkit-box-shadow: inset 2px 2px 5px #000;
box-shadow: inset 2px 2px 5px #000;

Der innere Boxschatten lässt Elemente perspektivisch nach hinten setzen. Die Box erscheint somit wie eingestanzt.

Das CSS dazu

-moz-box-shadow: inset 0px 0px 10px #fff;
-webkit-box-shadow: inset 0px 0px 10px #fff;
box-shadow: inset 0px 0px 10px #fff;

Wenn man der Versatz des box-shadow auf 0 setzt, wird der Schatten gleichmäßig um das Element gelegt. Das gilt auch für den äußeren Schatten.

Beispiele für Boxschatten mit Radius

Ein vierter Parameter von box-shadow lässt uns den Schattenradius gesondert festlegen. Wie in diesen Beispielen zu sehen, verwende ich einen border-radius von 5px. Der Schattenradius kann ein anderer sein.

Das CSS dazu

-moz-box-shadow: 5px 5px 10px 10px #000fff;
-webkit-box-shadow: 5px 5px 10px 10px #000fff;
box-shadow: 5px 5px 10px 10px #000fff;

Mit dem vierten Parameter lässt sich der Schattenradius erhöhen.

Das CSS dazu

-moz-box-shadow: 0px 0px 2px 2px yellow;
-webkit-box-shadow: 0px 0px 2px 2px yellow;
box-shadow: 0px 0px 2px 2px yellow;

Auch ein kleinerer Schattenradius lässt sich einstellen.

Beispiele mehrfacher Boxschatten

Die Möglichkeit wie auch bei text-shadow mehrere Schatten zu kombinieren habe ich bei Peter Kröner entdecken können. In seinem Beispiel kombiniert er vier verschiedenfarbige Boxschatten auf einmal.

Das CSS dazu

-moz-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
-webkit-box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;
box-shadow: 8px 8px 8px red, -8px 8px 8px green, 8px -8px 8px blue, -8px -8px 8px yellow;

Dieses Gebilde ist grafisch sicher optimierbar, bildet aber hervorragend die Möglichkeiten von box-shadow ab.

box-shadow im IE (Internet Explorer)

Mit dem shadow filter lassen sich, wenn auch wesentlich eingeschränkter, Boxschatten im Internet Explorer darstellen. Unseren Boxschatten könnten wir wie folgt erweitern:

Das CSS dazu

-moz-box-shadow: 1px 1px 3px #666;
-webkit-box-shadow: 1px 1px 3px #666;
box-shadow: 1px 1px 3px #666;
filter:progid:DXImageTransform.Microsoft.Shadow(strength=3,color=#666666,direction=135);

Hier die Ansicht im IE

Das ist nicht sonderlich schön und noch weniger valide, aber manchem mag es zumindest eine kleine Erleichterung sein und besseres ist der gemeine IE-Nutzer eh nicht gewöhnt.

Fazit

Wie bereits in der Einleitung gesagt, mit der CSS-Eigenschaft box-shadow sollte man, wenn einem Browserkompatibilität am Herzen liegt, vorsichtig umgehen. Aber gerade mit der Lösung für den IE finde ich den zurückhaltenen Einsatz des Boxschattens durchaus okay.

Relevante Links

• W3C über box-shadow
• Mozilla über -moz-box-shadow
• Webkit über -webkit-box-shadow
• Microsoft über Shadow Filter
• Schönes neues CSS: box-shadow – Peter Kröner
• CSS Box Shadow – CSS-Tricks

Mit CSS3 sollte sich jeder Webdesigner ernsthaft auseinandersetzen, da die Möglickeiten von CSS3 oft verblüffend sind. Dieser Artikel versucht einen Überblick darüber zu vermitteln, was man alles mit CSS3 anstellen kann.

Image Slider

Link zu deluxeblogtipps.com

Es gibt bereits viele gute JavaScript Image Slider. Mit CSS3 gibt es jetzt auch die Möglichkeit, einen Imageslider nur mit CSS und ganz ohne JavaScript zu erstellen. Eine ausführliche Anleitung mit Live-Demo und dem Quelltext als Zip-Datei findet man bei Rilwis (Tran Ngoc Tuan Anh).

CSS Text Gradient

Link zu nicewebtype.com

Auch Farbverläufe von Texten kann man nun mit CSS3 darstellen, ohne extra eine mit Photoshop erstellte Grafik einbinden zu müssen. Tim Brown erklärt sehr genau in seinem Artikel, wie man mit CSS3 Farbverläufe für Schriften erstellen kann.

CSS Shapes

Link zu net.tutsplus.com

Formen kann man mit geschicktem Einsatz von CSS3 sehr einfach gestalten. Eine verblüffend einfache Anleitung zur Erstellung von CSS Formen mit Video, Live Demo und der Quelldateien als im Zip-Format wurde von Nettuts Editor Jeffrey Way erstellt.

CSS Menüs und Buttons

Link zu webdesignerwall.com

Buttons kann man auch sehr einfach mit CSS3 erstellen. Eine gute Anleitung und die Live Demo gibt es bei Nick La. Eine ansprechend gestaltete und gute Übersicht über verschiedene CSS Eigenschaften hat Louis Lazaris erstellt. Die Live Demo sollte man sich unbedingt ansehen.

Wer noch mehr über verschiedene CSS Menüs und Buttons erfahren möchte, dem empfehle ich die Übersicht mit 12 CSS Button und Menü Techniken von Henry Jones.

CSS Teaserboxen mit Farbverlauf

Link zu blog.marit.ag

Wie man mit CSS3 Hintergrundverläufe für Teaser Boxen erstellt, kann man von Sven in seinem gut geschriebenen deutschsprachigen Artikel erfahren.

CSS3 und Email Clients

Link zu net.tutplus.com

Ob es bereits sinnvoll ist, CSS3 für den Versand von Emails einzusetzen, muss jeder für sich selbst entscheiden. Eine gute Einführung zum Thema mit einer praktischen Anleitung hat von Ros Hodgekiss bei net.tutplus.com veröffentlicht.

CSS3 Animationen als Flash Ersatz?

Link zu richardleggett.co.uk

JavaScript und CSS3 könnnen eventuell bald eine Alternative für manche Flash Animationen werden. Bisher erreichen die CSS3 Annimationen aus meiner Sicht noch nicht die Qualität, die man mit Flash erreichen kann. Allerdings stellen sie bereits für die Suchmaschinenoptimierung eine interessante Alternative dar. Es bleibt abzuwarten, welche Animationen bald mit CSS3 zu sehen sind. Drei erste Beispiele habe ich bei Richard Leggett, Florian Batschi [Demo], und Marco Kuiper [Demo] gefunden.

Text beschneiden oder Wörter umbrechen mit CSS3

Link zu hyperkontext.at

Einen Text beschneiden oder Wörter umbrechen kann man mit den CSS3 Eigenschaften text-overflow und word-wrap. Wie man das genau anstellt, kann man in der deutschsprachigen Erklärung bei hyperkontext.at nachlesen.

12 Kostenlose HTML5-CSS3 Templates

Link zu devsnippets.com

Eine sehr gute Übersicht zu 12 eleganten und kostenlosen HTML5-CSS3 Templates kann man bei devsnippets.com finden. Dort sind einige sehr spannende Beispiele enthalten, die einen inspirieren können.

Fazit

Mit CSS3 gibt es einige neue Möglichkeiten zu entdecken. Noch unterstützen nicht alle Browser CSS3 vollständig. Allerdings lohnt es sich aus meiner Sicht sehr, sich bereits jetzt mit den neuen Möglichkeiten von CSS3 auseinanderzusetzen. Viel Spass beim Testen!

In dem ersten Teil meines Tutorials über Bildeffekte mit Overlays möchte ich zeigen, wie man mit ein wenig Photoshop und ein paar Zeilen HTML und CSS ganz normalen Fotos verblüffende Effekte wie abgerundete Ecken und Schlagschatten hinzufügen kann.

Das Ziel

Am Ende dieses Tutorials werde ich einem normalen Foto, ohne es selbst zu bearbeiten, abgerundete Ecken und einen Schlagschatten hinzugefügt haben. Besonders im zweiten Teil wird dann deutlich, wie nützlich dieser Effekt ist und wie man diesen Vorgang mit Benutzerdefinierten Feldern in WordPress-Themes automatisieren kann.

Du willst erst wissen, worum genau es geht?
Dann schau Dir erst die Demo dieses Tutorials an.

Die Vorgehensweise

Zunächst erstelle ich in Photoshop den nötigen Bild-Overlay, den ich später mittels HTML und CSS so über das Foto positioniere, dass es den Anschein hat, dass das Bild abgerundete Ecken und einen Schlagschatten hat.

Schritt 1 – Photoshop

In Photoshop lege ich mir als erstes eine neue Datei mit den Maßen 540x440px und einem hellen Hintergrund #f9f9f9 an. Darüber lege ich auf eine zweite Ebene das Foto einer nicht hässlichen jugen Frau mit den Maßen 400x300px.

Schritt 2 – Photoshop

Über das Foto lege ich nun mit dem Abgerundete-Ecken-Werkzeug eine Ebene in denselben Maßen (wie das Foto) und einem Radius von 10px.

Schritt 3 – Photoshop

Im nächsten Schritte blende ich die Ebene des Fotos zur besseren Übersicht zunächst aus und lege die gewünschten Ebeneneffekte für meinen Bild-Overlay an. In meinem Beispiel ist das ein Schlagschatten (Deckkraft: 75%, Abstand: 2px & Größe: 5px).

Schritt 4 – Photoshop

Wenn ich das Bild unter dem Overlay nun wieder einblende, sieht man die überstehenden Ecken des Fotos. Um das Foto nur im gewünschten Bereich (innerhalb der abgerundeten Ecken) anzeigen zu lassen, klicke ich bei gedrückter STRG-Taste (oder Apfel- oder CMD-) auf die Miniaturansicht der Vektormaske des abgerundeten Rechtecks, um die richtige Auswahl zu laden.

Schritt 5 – Photoshop

Dann blende ich das Rechteck mit abgerundeten Ecken aus und füge dem Foto mit dieser Auswahl eine Ebenenmaske hinzu. Bemerkung: Dieser Schritt ist nicht unbedingt nötig und dient hier nur zur Veranschaulichung.

Schritt 6 – Photoshop

Die Ebene des abgerundeten Rechtecks, das über dem Foto liegt, wird nun wieder eingeblendet. Außerdem setze ich die Deckkraft innerhalb der Ebene (Fläche) auf 0%. Der Unterschied zur Ebenendeckkraft ist, dass trotz der 100% Transparenz der Ebenenstil (Schlagschatten) sichtbar bleibt.

Schritt 7 – Photoshop

Das Foto, das ich ja später eh separat ansprechen möchte, blende ich aus. Mit dem Klick auf die Vektormaske bei gedrückter STRG-Taste lade ich mir die Auswahl des abgerundeten Rechtecks, das ich wieder eingeblendet habe. Diese Auswahl schneide ich nun aus der Hintergrundebene aus, so dass im Bereich des Fotos nun ein transparenter Bereich entsteht.

Schritt 8 – Photoshop

Mit dem Freistellen-Werkzeug schneide ich mir schließlich das endgültige Format meines Bild-Overlays zu. Dabei lasse ich an jeder Seite 10px Platz, so dass der Overlay 420x300px misst.

Schritt 9 – Photoshop

Als letzten Schritt in Photoshop wähle ich nun Für Web und Geräte speichern, wähle als Bildformat PNG (wichtig für die Transparenz) und lege die Bilddatei unter dem Namen img-overlay.png ab.

Schritt 10 – HTML/CSS

Um die HTML/CSS-Struktur zu erstellen, lege ich mir einen Beispielordner /bildeffekte an, speichere dort mein Beispielfoto foto.jpg und mein Bild-Overlay img-overlay.png. Desweiteren lege ich mir gleich eine Stylesheet-Datei style.css für die späteren Formatierungen an.

Schritt 11 – HTML/CSS

Für das Beispiel lege ich mir eine index.html mit zwei Überschriften und meinem Beispielfoto an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">

<html>
<head>

<title>Tutorial: Kreative Effekte mit Bild-Overlays erzeugen – Demo</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div id="main">

        <h1>Kreative Effekte mit Bild-Overlays</h1>
        <h2>von Simon Rimkus [webdemar]</h2>

        <div id="content">
            <img src="foto.jpg" alt="foto" width="400" height="300"/>
        </div>

       </div>

</body>
</html>

Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay

Schritt 12 – HTML/CSS

Damit das Ganze etwas ansprechender aussieht habe ich folgende Formatierung über die externe Stylesheet-Datei style.css vorgenommen.

body {
    margin: 100px 0 0;
    background: #f9f9f9;
}

#main {
    width: 600px;
    margin: 0 auto;
}

h1 {
    color: #444;
    font-size: 36px;
    font-family: Georgia, serif;
    text-shadow: 1px 1px 0px #fff;
    text-align: center;
}

h2 {
    color: #666;
    font-size: 10px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    letter-spacing: 6px;
}

#content {
    margin: 100px auto 0;
    text-align: center;
}

Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay

Schritt 13 – HTML/CSS

Das eigentliche Ziel war und ist, den Bild-Overlay über das Foto zu legen und somit den gewünschten Effekt zu erzielen. Dazu bedarf es zunächst einiger Zeilen mehr im HTML-Code.

    <div id="main">

        <h1>Kreative Effekte mit Bild-Overlays</h1>
        <h2>Ein Tutorial von Simon Rimkus [webdemar]</h2>

        <div id="content">
            <div class="foto-wrap">
                <img src="foto.jpg" alt="foto" width="400" height="300" />
                <span class="img-overlay"><img src="img-overlay.png" alt="" width="420" height="320" /></span>
            </div>
        </div><!-- end content -->

    </div><!-- end main -->

Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay

Schritt 14 – HTML/CSS

Ich habe nun das Foto und den Bild-Overlay in einen weitern div mit der Klasse foto-wrap eingebaut, um diese innerhalb dieses divs mit CSS absolut positionieren zu können. Das Stylesheet ist also um weitere Zeilen zu erweitern.

.foto-wrap {
    position: relative;
    width: 400px;
    margin: 0 auto;
}

.foto-wrap img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
}

.foto-wrap span {
    position: absolute;
    top: -10px;
    left: -10px;
    width: auto;
}

Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay

Schritt 15 – HTML/CSS

Der Bild-Overlay ist nun innerhalb des Container-divs mit der Klasse foto-wrap über dem eigentlichen Foto positioniert und verleiht ihm die gewünschten Effekte abgerundete Ecken und Schlagschatten.

Fazit

Dieser erste Teil des Tutorials macht hoffentlich deutlich, welche Möglichkeiten hinter dieser Technik stecken. Besonders im Bereich dynamischer Einbindung von Bildern macht der Effekt Sinn, da das Foto ja beliebig ausgetauscht werden kann und quasi automatisch ein paar Effekte verpasst bekommt.

Was kommt im zweiten Teil?

Im zweiten Teil werde ich diese Technik mit WordPress verknüpfen. Ich werde diesen Effekt auf Post-Fotos, die ich über Benutzerdefinierte Felder einbinde, in einem Loop automatisch anwenden. Außerdem zeige ich noch weitere Effekte, mit denen man normale Fotos etwas aufpeppen kann.

Relevante Links

• Demo ohne Overlay-Effekt
• Demo mit Overlay-Effekt
• Theme deLuxe – Live-Beispiel

Moderne Browser können es schon. Des Webdesigners natürlicher Feind IE verweigert sich noch. Mit der CSS3-Eigenschaft text-shadow lassen sich tolle Effekte erzielen. Besonders interessant wird es, wenn man mehrere Textschatten auf einmal anwendet. Effekte wie Letterpress oder glühender Text sind dann wenige Zeilen CSS.

Für IE-Nutzer! Die folgenden Texteffekte sind nur in richtigen Browsern zu sehen.
Zur Verdeutlichung die Demo als Bild. Es ist Zeit zum Umsteigen.

CSS-Eigenschaft text-shadow

Viele von Euch kennen sie sicher schon und man sieht sie im Web immer häufiger. Die CSS3-Eigenschaft text-shadow. Man kann mit ihr in wenigen Zeilen CSS beeindruckende Effekte erzielen. Benutzer des Internet-Explorers kommen noch nicht in ihren Genuss. Auch der IE8 verweigert sich und kann/will sie nicht abbilden. Wenn man das in Kauf nimmt, kann man bereits viele schöne Sachen mit text-shadow anstellen.

Sprungmarken

• Die Schreibweise (einfacher Textschatten)
• Beispiele einfacher Textschatten
• Textschatten kombinieren
• Die Schreibweise (mehrfache Textschatten)
• Beispiele mehrfacher Textschatten
• Sonstige Spielereien

Die Schreibweise

.shadow {
    text-shadow: 1px 1px 0px #000;
    /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Bemerkung:
Der Aufbau von text-shadow ist einfach. Der erste Wert gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert den Grad der Unschärfe des Schattens und als letztes wird die Farbe des Schattens definiert.

Beispiele einfacher Textschatten

Es ist also auf einfache Art und Weise möglich, einem HTML-Text mit text-shadow eine gewisse Tiefe und Plastizität zu verleihen.

Das CSS dazu:

background:#404040;
color:#fff;
text-shadow: 1px 1px 0px #000;

Auf hellem Hintergrund mit dunkler Schrift kann ein weißer Textschatten interessant wirken.

Das CSS dazu:

background:#ccc;
color:#505050;
text-shadow: 1px 1px 0px #fff;

Textschatten kombinieren

Das (zumindest für mich) wirklich Neue ist, dass man Textschatten auch kombinieren kann. Es können mehrere Textschatten auf ein und denselben Text angewendet werden. Das öffnet natürlich einige Türen.

Viele kennen das sicher aus Photoshop. Um einem Objekt Plastizität zu verleihen, wendet man oben einen dunklen Schatten nach innen und unten einen hellen Schlagschatten an oder umgekehrt. Dies lässt sich nun auch mit text-shadow erreichen.

Die Schreibweise

.shadow {
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    /* Schatten #1 Versatz links - Versatz oben - Unschärfe (Blur) - Farbe,
    Schatten #2 Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

Bemerkung:
Mehrere Schatten für denselben Text können durch Kommas getrennt hintereinandergesetzt werden. Den Schatten nach innen erzeuge ich mit negativen Werten für den x- und y-Versatz und einer dunklen Farbe. Der helle Schlagschatten wird wie gehabt mit einem Versatz von 1px von links und von oben erzeugt.

Beispiele mehrfacher Textschatten

Zur Verdeutlichung wende ich obiges Beispiel auf einem dunklen Hintergrund an.

Das CSS dazu:

background:#404040;
color:#303030;
text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;

Die Kombination auf hellem Hintergrund würde wie folgt aussehen.

Das CSS dazu:

background:#ccc;
color:#505050;
text-shadow: -1px -1px 0px #202020, 1px 1px 0px #fff;

Sonstige Spielereien

Die Kombination mehrerer Textschatten lässt natürlich noch viele weitere Spielereien zu. Im Gegensatz zum Letterpress-Effekt kann auch der Emboss-Effekt (Abgeflachte Kante Relief) erzeugt werden.

Das CSS dazu:

background:#404040;
color:#505050;
text-shadow: 1px 1px 0px #202020, -1px -1px 0px #606060;

Mit dem Einsatz des Wertes für die Unschärfe (Blur) kann man beispielsweise einen glühenden Text erzeugen.

Das CSS dazu:

background:#404040;
color:#00ff0f;
text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;

Fazit

Die CSS3-Eigenschaft bietet viele, viele Möglichkeiten einem Webdesign ohne den Einsatz von Bildern eine professionelle Plastizität zu verleihen. Leider können IE-Nutzer diese Effekte (ohne Einsatz von jQuery-Lösungen) nicht sehen. Wie so oft muss der Webdesigner also abwägen, wo wann und wieviel diese Eigenschaften verwendet werden.

Relevante Links

• W3C zur CSS-Eigenschaft text-shadow (dt. Übersetzung)
• Create a Letterpress Effect with CSS Text-Shadow
• Exploring CSS3 text-shadow