Schatten und Farbverläufe
- 3D-Effekte mit CSS
- Dreiecke per CSS ?
- 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 ...
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.
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);
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-workDamit 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.
