Schatten und Farbverläufe

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.

© 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);

© 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.