CSS - Tricks

Schatten und Farbverläufe

1.12.2011 von Dr. Florence Maurice

ca. 3:50 Min
Ratgeber
VG Wort Pixel
  1. 3D-Effekte mit CSS
  2. Dreiecke per CSS ?
  3. Schatten und Farbverläufe

Damit es klappt, muss das Element allerdings hasLayout haben, was im Beispiel über zoom: 1 erreicht wird. Außerdem darf das Element selbst keine Hintergrundfarbe haben.Filter funktionieren meist recht ordentlich, bei text-shadow ist es aber nicht so recht zufriedenstellend, zusätzlich wirken die Ränder etwas ausgefranst. Hilfreich ist dann die Zugabe weiterer Filter, was das Ganze allerdings auch recht kompliziert macht.

Text in Prägeschrift über text-shadow.
Text in Prägeschrift über text-shadow.
© Internet Magazin

Erfolgversprechender sieht eine Lösung aus, die Teil der Javascript-Bibliothek Sandpaper ist. Mithilfe dieser Bibliothek kann man außerdem dem Internet Explorer CSS3-Transformationen beibringen. Zur Drucklegung des Artikels gab es noch Darstellungsprobleme beim IE 8, die hoffentlich bald behoben sind. Außerdem soll auch CSS3 PIE bald eine Nachbesserung für text-shadow liefern, so dass sich neue Lösungen abzeichnen.Dass man aber bis dahin nicht auf text-shadow verzichten muss, zeigt beispielsweise die Webseite www.tvmovie.de . Bei der Navigation gibt es einen feinen Textschatten - für die Nicht-IE-Nutzer.

Schatten und Farbverläufe

Schatten ist nicht nur bei Texten, sondern durch box-shadow bei allen Elementen möglich. Die Eigenschaft erwartet wie text-shadow vier Angaben:

box-shadow: inset 0px -3px 1px
rgba(0, 0, 0, 0.45)

Im Unterschied zu text-shadow sollten Sie box-shadow allerdings mit -moz- für ältere Firefox und -webkit- für ältere Webkitbrowser wie Safari oder Chrome schreiben, wie Sie es auch gleich am Beispiel der Erstellung eines 3D-Buttons sehen werden.Über box-shadow können Sie - wenn Sie eine helle Farbe wählen - auch einen Lichtfleck erzeugen.Eine andere Möglichkeit, um Helligkeit, Struktur und damit mehr Tiefe zu erzeugen, ist ein Lichteffekt über Farbverläufe. Einen Farbverlauf von oben nach unten erzeugt man folgendermaßen:

background-image: linear-gradient
(#C84543, #5B0E0D);

Auch 3D-Würfel lassen sich dank geschickt eingesetzter Rahmenelemente rein mit CSS 2.1 erzeugen.
Auch 3D-Würfel lassen sich dank geschickt eingesetzter Rahmenelemente rein mit CSS 2.1 erzeugen.
© Internet Magazin

Hinter linear-gradient schreiben Sie in Klammern zuerst die Farbe, mit der der Farbverlauf beginnt, und nach einem Komma die Farbe, mit der der Farbverlauf aufhört. Die Angabe linear-gradient müssen Sie für die Browser mit allen herstellerspezifischen Präfixen schreiben, also -o- für Opera, -moz- für Firefox, -webkit- für Chrome oder Safari, -ms- für IE (ab Version 10). Ältere Safari-Browser benötigen noch eine etwas andere Syntax, nämlich:

background-image: -webkit-gradient
(linear, center top, center bottom, from(#C84543), to(#5B0E0D));

Wie sich ein Farbverlauf für einen 3D-Button einsetzen lässt, sehen Sie nun am Beispiel; mit dabei sind weitere schöne CSS3-Features wie box-shadow oder border-radius. Das Ganze funktioniert dank CSS3 PIE dann auch im IE.3D-Button mit Fallback für den IEDer HTML-Code ist ein einfacher Link:

<div><a href="#" class="button">
3D-Button</a></div>

Per CSS erfolgen zuerst die grundlegenden Formatierungen: Der Link wird zum Blockelement, erhält eine angemessene Breite und eine passende Hintergrundfarbe. Die Hintergrundfarbe ist gleichzeitig auch die Fallbacklösung, falls etwas mit der Anzeige des Farbverlaufs nicht klappt.

.button {
display: block;
width:5em;
padding: 8px 14px 10px;
background-color: #8E2826;
text-align: center;

Dann werden doppelte Schatten ergänzt.

-webkit-box-shadow: inset 0px -3px
1px rgba(0, 0, 0, 0.45), 0px 2px 2pxrgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px
1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba
(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);

Im Beispiel sind es zwei Schattenangaben, die durch Komma getrennt hintereinander stehen. Wie gesagt, müssen Sie box- shadow mit den herstellerspezifischen Präfixen für ältere Firefox- und Webkitbrowser versehen. Durch inset wird der erste Schatten innerhalb und nicht außerhalb des Elements angezeigt. Der Button soll diskret abgerundete Ecken haben:

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

und gleich noch einen Textschatten:

text-shadow: 1px 1px 0px rgba
(0, 0, 0, 0.5);

Schließlich soll ein Farbverlauf eingesetzt werden. Er geht von oben nach unten und durchläuft verschiedene Rottöne.

background-image: -webkit-gradient
(linear, center top, center bottom, from(#C84543), to(#5B0E0D));
background-image: -moz-linear-
gradient(#C84543, #5B0E0D);
background-image: -ms-linear-
gradient(#C84543, #5B0E0D);
background-image: -o-linear-
gradient(#C84543, #5B0E0D);
background-image: -webkit-linear-
gradient(#C84543, #5B0E0D);
background-image: linear-
gradient(#C84543, #5B0E0D);

Der Farbverlauf ist etwas aufwändig, da Sie die Angaben mit den herstellerspezifischen Präfixen einzeln schreiben müssen und außerdem für ältere Webkitbrowser eine andere Syntax brauchen.Diese Kombination von neuen CSS3-Features lässt den IE alt aussehen. Glücklicherweise können Sie hier aber über CSS3 PIE durch folgende Zeilen nachbessern:

-pie-background: linear-gradient
(#C84543, #5B0E0D);
behavior: url(PIE.htc);
}

Link-Tipps

www.css3d.net/ribbon-generator/ blog.typekit.com/2011/07/19/shading-with-css-text-shadows/ www.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/ css3pie.com/ box-shadow.inspectelement.com/demos/css3/buttons/ www.romancortes.com/blog/css-3d-meninas/ fixed.www.romancortes.com/blog/pure-css-coke-can/ www.webkit.org/blog-files/3d-transforms/poster-circle.html webdesignledger.com/tips/adding-depth-with-pixel-perfect-line-work

Damit das funktioniert, müssen Sie die Datei auf einem Server ausführen und die htc-Datei von CSS3 PIE muss sich am angegebenen Ort befinden. Bei allen Regeln, bei denen CSS3 PIE in Aktion treten soll, ergänzen Sie behavior: url(PIE.htc).Die Angabe für den Farbverlauf müssen Sie noch einmal hinter pie-background wiederholen. Damit funktionieren alle Effekte im IE - bis auf den Textschatten.Das war nur eine Auswahl an praktischen 3D-Tricks über CSS. Weitere schöne Möglichkeiten ergeben sich mit dem Parallax-Effekt, bei dem sich verschiedene Hintergrundelemente unterschiedlich schnell bewegen - je nachdem, ob sie sich eher im Vordergrund oder eher weiter hinten befinden. Ansonsten gibt es auch noch die eigentlich dafür vorgesehenen 3D-Transforms für tolle Effekte - leider noch mit magerer Browserunterstützung. Sie lassen einen immerhin erahnen, wie sich die Benutzeroberflächen der Zukunft anfühlen werden.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.