CSS3: Schatten für Text und Boxen

15 Kommentare

Im Anschluss an den Artikel CSS3 und abgerundete Ecken widme ich mich jetzt den Schatteneffekten für Text und Boxen. Bevor ich anfange, möchte ich einen Hinweis loswerden: die folgenden werden nur in modernen Browsern – Firefox, Safari, Chrome, Opera und dem IE9 – angezeigt. Leider werden die inline CSS-Angaben auch im Google Reader ignoriert. Aber da ist kein Bug, sondern lediglich ein Grund mehr um die Website zu besuchen. 🙂

Textschatten mit text-shadow

Bei dem Schatten für Text gibt es freundlicherweise lediglich eine Eigenschaft text-shadow und man muss daher nicht browserspezifisches Gematsche berücksichtigen. Die Eigenschaft wird nach folgendem Muster notiert: 

text-shadow: hV vV blur #xyz;
  • hV = horizontale Verschiebung
  • vV = vertikale Verschiebung
  • blur = Unschärfe
  • #xyz = der Farbwert für den Schatten

Hier ein Beispiel-Code:

.schatten {
    color: #444;
    font-size: 24px;
    text-shadow: 2px 2px 3px #333;
}

Und hier die Auswirkung:

Ich bin ein ganz toller Text mit Schatten!

Variiert man die Werte von Textschatten, so kann man einen “klassischen” Schlagschatten oder “Glüheffekte” auf dunklen Hintergründen erreichen. Hier ein kleines Beispiel, zuerst der Code:

.schatten {
    background: #000;
    color: #eee;
    font-size: 24px;
    padding: 12px;
    text-shadow: 4px 3px 9px #ffd700;
}

… und hier die Auswirkung:

Ich bin ein ganz toller Text mit Schatten!

Wer unbedingt auch die heutigen Internet-Explorer-Versionen ins Boot holen will, der kann auf die Filter von Microsoft zurückgreifen:

filter:dropshadow(color=#999999, offx=1, offy=1);

Ich finde allerdings das Ergebnis dieses Filters nicht so gut und würde empfehlen darauf zu verzichten.

Boxschatten mit box-shadow

Bei dieser CSS-Eigenschaft haben wir nicht so viel Glück und sind leider gezwungen auf die browserspezifische Präfixe zurückzugreifen:

  • Standard: box-shadow
  • Geckos/Mozilla: -moz-box-shadow
  • Webkit: -webkit-box-shadow

Genau wie das oben beschriebene text-shadow wird auch box-shadow nach dem folgenden Muster notiert:

box-shadow: hV vV blur #xyz;

Hier ein einfaches Beispiel:

.schatten {
    background: #ddd; padding: 12px;
    -webkit-box-shadow: 3px 2px 5px #aaa;
    -moz-box-shadow: 3px 2px 5px #aaa;
    box-shadow: 3px 2px 5px #aaa;
}

… und hier die Auswirkung:

Schön schattig in der Box.

Auch hier kann man durch die Variation der einzelnen Werte unterschiedliche Schatten erreichen: vom “klassischen” Schlagschatten bis zu einem Glüheffekt. Man kann den Boxschatten auch mit den abgerundeten Ecken kombinieren:

.schatten {
    background: #ddd; padding: 12px;
    -webkit-box-shadow: 3px 2px 5px #aaa;
    -moz-box-shadow: 3px 2px 5px #aaa;
    box-shadow: 3px 2px 5px #aaa;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

Hier das Ergebnis des oberen Codes:

Voll rund hier.

Fazit

Sowohl Text- als auch Boxschatten sind interessante Eigenschaften, die es erlauben mit minimalen Einsatz eine Website aufzupeppen. Leider bleibt auch hier der Internet Explorer momentan außen vor. Der Hinweis auf den Internet Explorer 9 ist ein schwacher Trost, da die momentanen IE-Versionen noch auf Jahre hinaus, auf sehr vielen Websites eine signifikante Größe darstellen werden.

Ist der Anteil der IE-Nutzer auf einer Website, wie zum Beispiel auf dieser hier, eher gering, dann spricht nichts dagegen auch in diesem Fall auf CSS3 zu setzen, schließlich wird hier lediglich das Layout aufgewertet und es wird keiner vom Inhalt ausgesperrt.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: , ,

15 Kommentare

  2. CSS3 PIE ist zwar auf den ersten Blick eine tolle Sache, auf den Zweiten und Dritten bemerkt man dann, wie langsam das Scrollen der Seite durch die VML-Grafiken und die per Filter geblurten halbtransparenten Schattenflächen wird. Außerdem dürfte man ziemliche Performanceprobleme bei sich dynamisch ändernden Eigenschaften bekommen (so die Entwickler per HTC-behavior-Event überhaupt drauf reagieren, aber ich vermute mal).

    Sprich: Es ist unperformant und nicht so robust, wie traditionelle und simplere, aber berechenbarere Techniken.

    Ich will damit zwar auch nicht sagen, dass man das Tool *nie* einsetzen darf, aber in der Mehrheit der Situationen ist es nicht geeignet.

    Und natürlich lohnt sich immer, solchen Paketen per Entwicklertools vor dem Einsatz mal unter die Haube zu schauen, um dessen Arbeitsweise zu kapieren.

  3. […] Simovic zeigt in einem Workshop, wie man mit CSS3 Schatteneffekte für Texte und Boxen    erzeugen […]

  4. Leider werden die inline CSS-Angaben auch im Google Reader ignoriert. Heißt ja auch Google Reader und nicht Google Shower 😉

    Schöner Artikel. Vor allem der letzte Absatz. So lange kein Kunde Vorgaben macht was man alles an Browsern zu unterstützen hat, sollte man mal so langsam dazu übergehen bestimmte Browserversionen nicht mehr zu unterstützen. Man kann es ja quasi wie bei den Frames machen:
    Diese Webseite benutzt CSS3. Ihr Browser unterstützt leider kein CSS3. Bitte wenden Sie sich an ihren Systemadministrator oder installieren einen Browser mit CSS3-Unterstützung.

  5. @Ralf:

    Diese Webseite benutzt CSS3. Ihr Browser unterstützt leider kein CSS3. Bitte wenden Sie sich an ihren Systemadministrator oder installieren einen Browser mit CSS3-Unterstützung.

    Womit sich dann auch der größte Teil der Besucher veralbert vorkommen dürfte. Ich sehe schon den ganz normalen Discounter-PC-besitzenden Internetsurfer vor seiner Kiste sitzen und denken…: “Ich hab doch gar keinen Systemadministrator, und was zum Teufel ist CSS3??”… 🙂
    Ich meine… wenn Firmen ihre Browser nicht erneuern ist das eine Sache… aber “Otto-Normal-Internetsurfer” (und das meine ich bestimmt nicht abwertend) ist gar nicht in der Lage das Problem zu erfassen und der Browser zu tauschen!
    Ich meine ehrlich mal.. wenn ich die ganzen Hinweisbalken sehe die dieser Tage auf den einzelnen Webseiten auftauchen ala “Wussten Sie schon das Ihr Browser absolut alter Mist ist und total Virengefährdet…” usw.
    Ich brauche nur mal irgendjemand x-belibigen aus meinen Umfeld nehmen… sagen wir z.B. mein Nachbar… der hat WinXP und IE6… und er ist nicht mal in der Lage ein Windows-Update zu fahren… geschweige denn den Browser zu aktualisieren oder zu tauschen… Er wird auch nächstes Jahr und auch in 5 Jahren noch genau mit dem selben System im Internet unterwegs sein. Und zwar genau so lange bis der PC mal kaputt ist und ein neuer gekauft wird. Und man kann ihm das nicht mal vorwerfen… nicht jeder ist ein “PC-Hund”… 🙂
    So ist das da draußen.. und daran wird sich auch nichts ändern… nur die “Evolution” wird Aabhilfe bringen (also Rechner kaputt – neuer gekauft), das dauert aber und geht viel langsamer als die Entwicklung von HTML, CSS und co.
    Wir Webmaster sind alle mehr oder weniger Experten und wissen was läuft, aber wir sollten uns immer auch vor Augen führen: “die Masse” da draußen ist es nicht.
    Das soll auch alles kein gemoze sein was ich hier schreibe und ich will die vielen neuen Funktionen auch garnicht verfluchen, ich benutze sie selbst oft und gerne… ich finde nur.. jede Webseite sollte auch auf alten Browsern, zwar nicht unbedingt original und ohne Fehler, aber doch zumindest lesbar sein. 🙂

    Oh mann… ist das ein Kommentar oder schon ein Post..? 😉
    Gruß Oliver

  6. wenn der Farbwert anstelle hexadezimaler schreibweise in rgba verwendet wird, kann der schatten – mittels dem alphawert – transparent dargestellte werden. so sieht der schatten auch bei texturiertem hintergrund nice aus.

  8. @Oliver:
    Das ist ein Henne-Ei-Problem. So lange alles funktioniert, wird nichts ausgetauscht. Das gilt für viele private Anwender genauso wie für Firmen. Normalerweise würden wir ja auch alle noch mit Mosaik surfen gäbe es nicht Webseiten die man damit nicht richtig anzeigen kann.
    Ein großer Umbruch fand bei den Browsern mit der Einführung von Frames statt. Plötzlich gab es Webseiten die nicht angezeigt werden konnten, statt dessen lediglich eine “Fehlermeldung” zeigten. Der Noframe-Tag ist ja nicht dazu gedacht dem Anwender zusagen das sein Browser veraltet ist, sondern um eine alternative Darstellung ohne Frames anzubieten.
    Aber anstatt sich die Mühe zu machen und die Webseite noch einmal ohne Frames zu programmieren, haben sich die allermeisten Webdesigner darauf beschränkt eine “Fehlermeldung” auszugeben.
    Das Ergebnis dürfte bekannt sein, es gibt heutzutage faktisch keinen Browser der nicht mit Frames umgehen kann.

    Allerdings muss man auch etwas den Hintergrund beleuchten. Webseiten waren bei der Einführung von Frames sehr teuer. Eine Firma hatte es sich damals zweimal überlegt ob sie eine Webseite einmal mit und einmal ohne Frames programmieren lies. Die Kosten für eine alternative Darstellung übertrafen die zu erwartenden Verluste durch vergraulte Besucher bei weitem.
    Heutzutage sind Webseiten spottbillig und werden, egal wie grausam programmiert, so gut wie in jedem Browser dargestellt. Für Firmen lohnt es sich deshalb nicht sich einen Kopf darüber zu machen ob es teurer ist eine alternative Darstellung, sprich eine Extrawurst für den IE, mit programmieren zu lassen oder ob es teurer kommt auf ein paar Besucher zu verzichten.
    Wenn es der Auftraggeber bezahlt, wird man als Webdesigner bestimmt nicht Nein sagen. Alleine schon um den Auftrag nicht zu verlieren. Aber als Privatperson kann man sich schon überlegen ob man lieber auf eine Hand voll Besucher verzichtet bzw. diese mit Hinweisen nervt und somit den Fortschritt ein wenig auf die Beine hilft. Oder ob man lieber alles beim Alten belässt und weiterhin bastelt & jammert.

  9. Ich verstehe Leute nicht, die den Internet Explorer freiwillig nutzen. Microsoft hängt mir seinem IE shr weit hinten und in Zeiten von Chrome, Safari und Firefox brauche ich den IE nur um einen neuen Browser zu downloaden – sonst ist der für mich nutzlos: Langsam, Hässlich, Veraltet.

    Vielen Dank für den tollen Artikel, ich bin gerade dabei mein CSS und HTML Wissen mal auszuarbeiten und auf den neusten Stand zu bringen und da kommen leicht erklärte Funktionen wie die box-shadow Funktion gerade gelegen.

    Danke 😉

  10. Die Frage ob ich einen Browser mag oder nicht mag stellt sich im geschäftlichen Umfeld eher weniger.

    So lange ich kleine Seiten betreibe oder betreue, die in erster Linie keine Geschäftskunden haben, lassen sich natürlich eine ganze Hand voll Browser inzwischen vernachlässigen (IE6 liegt mittlerweile bei Seiten die primär von internet-affinen Nutzern besucht wird unter 3%).

    Habe ich auf einem großen Portal aber viele Geschäfts-, Firmenenkunden, komme ich auch heute noch nicht darum mich sogar um den IE6 zu kümmern.

    Das liegt schlicht und ergreifend daran, dass ein Unternehmen mit mehr als 100 Mitarbeitern aus seinem “Lizensgefängnis” nicht ausbrechen kann.

    Schau dir einen Verlag wie Axel Springer an. Wenn man sich den Traffic der ASV Portale isoliert anschaut, dann ist da der Anteil an IE6 Browsern bei über 12%.
    Was einfach daran liegt, dass dort aus Linzenskostengründen auch noch Win2000 Systeme eingesetzt werden. Ein Update aller Systeme auf aktuelle Betriebssysteme kostet einem Unternehmen in der Größe eine so große Stange Geld, dass es einfach nicht wirtschaftlich ist so einen Schritt zu unternehmen.

    Wenn ich mit einem Portal aber wirklich Geld verdiene, und diese “Kunden” darauf Abschlüsse machen sollen, ist der finanzielle Verlust durch eventuelle schlechtere Conversions nicht aufzufangen.

  11. @ingx: “Das liegt schlicht und ergreifend daran, dass ein Unternehmen mit mehr als 100 Mitarbeitern aus seinem “Lizensgefängnis” nicht ausbrechen kann.

    Ich glaube das liegt noch nicht einmal am Lizenzgefängnis das dieser Mist noch verbreitet wird. Meine Schwester macht gerade eine Umschulung zur Verwaltungskauffrau, soll also in Zukunft bei Behörden usw. arbeiten. Logischerweise stehen auch Office-Programme auf den Lehrplan.
    Als erstes hatte ich ihr Open Office installiert. Netter Versuch, so was wird im Unterricht noch nicht einmal erwähnt! Danach dann halt eins von den neueren MS Office Paketen (2007 oder so). Tja, schade. Auch dies ist dann “zu neu”. Es wird tatsächlich dort noch auf Office 2003 unterrichtet. Ich habe mich gar nicht getraut zu fragen ob die denn schon Windows ME haben oder noch Win98SE einsetzen.

    Unternehmen haben ja Alternativen. Aber kein Unternehmer bezahlt quasi die Umschulung auf diese Alternativen. Die Unternehmer sind froh das sie Leute haben die mit irgendein (!) Office-Paket umgehen können. Und da das Personal auf Antik-Software ausgebildet wird, wird in den Unternehmen halt auch Antik-Software verwendet. Funktioniert ja auch, warum neues Zeuchs anschaffen. Die Mitarbeiter sollen schließlich arbeiten und nicht im Internet surfen.

    Das freie Software wie FireFox, Google Chrome oder Opera nicht installiert wird, hat also weniger etwas mit Lizenzgefängnis zu tun. Da fehlt einfach Wissen und Willen.

  12. ich finde den Schatten hier ein wenig übertrieben — fast wie in den 90ern mit den ganzen bunti klicki bildchen 🙂 — aber wenn man den mit Bedacht einsetzt wie ich hier: http://www.vaxo.de/ schaut es um Längen besser aus als ohne – finde ich!

    In meinem Fall wären es:
    text-shadow: 4px 4px 4px #bbb;

  15. […] dennoch einen sehr ansehnlichen Button stylen kann. Dabei wird unter anderem auf abgerundete Ecken, Box-Schatten und Transitionen […]

Kommentare sind geschlossen.