CSS - Tricks

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.

Text in Prägeschrift über text-shadow.

© Internet Magazin

Text in Prägeschrift über text-shadow.

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.

© Internet Magazin

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

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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…