Responsive Webdesign – Grundlagen

CSS3 statt Bilder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
An vielen Stellen musste man früher zu Bildern greifen, doch heute kann man manches direkt über CSS3 realisieren. Das führt zu einer besseren Darstellung auf hochauflösenden Displays und steigert die Performance.

Transkript

Da Bilder problematisch sein können bei hochauflösenden Displays und zudem sich auch negativ auf die Performance auswirken können, sollten Sie, wo es sich anbietet, auf Bilder verzichten und wo es geht beispielsweise auf CSS 3 setzen. Dafür gibt es eine Reihe von Kandidaten. Ich habe hier einmal aufgerufen ein Beispiel für eine Box mit abgerundeten Ecken, so wie man es früher realisiert hätte. Was braucht man dafür? Klar, vier Bilder. Sie sehen hier den zugehörigen Code. Das ist natürlich ungünstig eben, weil Bilder auf hochauflösenden Displays keine gute Figur machen, wenn man sie nicht dafür optimiert hat. Und zum anderen natürlich auch aus Performance-Gründen. Heute können wir stattdessen glücklicherweise einfach auf eine CSS 3 Eigenschaft setzen, die passenderweise heißt border-radius. Hinter border-radius geben Sie an wie stark die Ecke abgerundet werden soll und das geschieht automatisch. Schauen wir mal dieses Beispiel an. Das zeigt jetzt mehrere über border-radius abgerundete Elemente. Sie sehen, Sie können natürlich auch sowas wie einen Kreis erstellen. Dafür geben Sie an im einfachsten Fall border-radius: 50% Und außerdem muss das Element selber natürlich ein Quadrat sein, damit das Ganze dann einen Kreis ergibt. Schöne Effekte wie gesagt einfach über die Eigenschaft border-radius. Ein anderer Fall, wo wir ebenfalls auf Bilder verzichten können, ist für Schatten um Boxen. Dafür gibt es die Eigenschaft in CSS 3 mit dem Namen box-shadow. Sehen wir uns hier mal ein Beispiel an. Hier verwende ich box-shadow mit hsla, das ist ja die in CSS 3 definierte intuitivere Art Farben anzugeben. Und ich kann hinter box-shadow zum Einen die Farbe spezifizieren. Dann gebe ich an die Verschiebung von oben-unten. Das Zweite ist die Verschiebung von rechts und links. Und der dritte Wert ist der Grad der Verschwommenheit. Schauen wir uns auch dieses Beispiel hier einmal im Browser an. Und dann sehen Sie, das sind jetzt alles Effekte über box-shadow, wo hier einmal der Grad der Verschwommenheit variiert wird. Hier wird variiert die Position des Schattens. Außerdem können Sie auch einen Schatten nach innen definieren. Dafür gibt es das Schlüsselwort inset. Schöne Effekte lassen sich dann erzielen, indem man keine Verschiebung bewirkt, also, die beiden ersten Längenangaben auf 0 setzt, hingegen ein Grad an Verschwommenheit und dann beispielsweise den Schatten außenrum zeichnen lässt oder nach innen zeichnen. Und es sind natürlich auch mehrfache Schatten möglich und das Ganze wie gesagt ohne Bilder. Es gibt aber nicht nur die Möglichkeit mit box-shadow Schatten um Boxen zu zeichnen, sondern Sie können auch Schatten um Texte zeichnen. Und dafür gibt es die Eigenschaft, die passenderweise heißt text-shadow. Text-shadow funktioniert wie box-shadow, nur dass Sie keinen inset angeben können. Und Sie können natürlich auch mehrfache Schatten definieren. Wichtig ist auch der Punkt, die Eigenschaft gibt es schon eigentlich in CSS 2, deswegen brauchen Sie da gar keinen Präfix, wo hingegen wir bei box-shadow für ältere Webkit-Browser noch webkit ergänzen sollten. Wenn wir auch hier mal Beispiele ansehen, dann sehen Sie, das sind jetzt hier so ganz diskrete Schatteneffekte. Das hier sind stärkere Schatteneffekte. Hier haben wir so einen Glüheffekt, oder hier lassen wir eine Kontur zeichnen. Alles rein über CSS 3, keine Bilder sind involviert. Und eine weitere schöne Möglichkeit, wo Sie Bilder einsparen können, sind bei Farbverläufen. Farbverläufe geben Elementen ein bisschen mehr Tiefe und sie werden besonders gern eingesetzt bei so Apply-Anwendungen und damit auch sehr oft bei Webseiten für mobile Geräte. Klassischerweise hätte man dann da einen Farbverlauf in einem Bildbearbeitungsprogramm erstellt und den dann zugewiesen. Schöner ist es natürlich, wenn man den Farbverlauf per CSS definieren kann. Und der weitere Vorteil davon ist, dass es natürlich immer schön scharf ist. Und außerdem passt sich der Farbverlauf prinzipiell immer an das Element an, dem er zugewiesen wird, was ein Bild natürlich per se nicht machen würde. Das müssten Sie irgendwie skalieren extra. Und beim Farbverlauf geht das automatisch. Wenn Sie so einen Farbverlauf definieren wollen, dann können Sie dem überall dort angeben, wo Sie auch sonst Bilder über CSS einbinden. Das heißt, man verwendet das am häufigsten als Hintergrundbild. Und hier habe ich auch ein Beispiel, wo ich das verwende. Wenn Sie einen Farbverlauf einsetzten wollen, sollten Sie immer zuerst eine Fallback-Farbe definieren. Das heißt, eine Farbe, die angezeigt wird, falls der Farbverlauf nicht funktioniert. Dann brauchen Sie zum Einen leider heute noch für ältere Webkit-Browser eine bisschen andere Syntax. Normalerweise würde ich sagen: der moderner Safari, der moderner Chrome, die kommen damit zurecht. Warum sollen wir uns hier noch um ältere Webkit-Browser kümmern? Aber das ist so eine besondere Situation, weil Sie einfach viele Android etc. Geräte haben, wo die Nutzer gar nicht auf die aktuellste Version updaten können. Das heißt, die haben per se intern eine alte Webkit-Version und die können gar nicht so leicht updaten. Und deswegen sollten wir hier eben auch ältere Webkit-Browser noch berücksichtigen. Dann gibt es hier die Variante für neuere Webkit-Browser und am Schluss die Standardeigenschaft, die beispielsweise im Firefox oder auch im Internet Explorer 10 funktioniert. Und die ist sehr gradlinig, da schreiben Sie einfach hin linear-gradient und geben an mit welcher Farbe soll der Farbverlauf beginnen, mit welcher soll er aufhören. Wenn wir dieses Beispiel auch einmal anschauen, dann sehen Sie: wir haben ja einen Farbverlauf mit so einem Blau-Ton, das geht so ins Schwarz über. Und der passt sich ganz wunderbar an je nachdem wie groß ich das Browser-Fenster aufziehe, passt sich der Farbverlauf immer an. Und das ist natürlich eine wichtige Flexibilität, wie wir sie beim Responsive Web Design gut brauchen können. Und all das sind eben Sachen, die auch auf hochauflösenden Displays gut funktionieren. Was macht man aber dabei mit älteren Browsern? CSS 3 funktioniert prinzipiell bis auf ganz kleine Ausnahmen erst ab Internet Explorer 9, manche Features auch erst ab Internet Explorer 10. Sie können natürlich hingehen und sowas wie border-radius nachbessern. Da gibt es zum Beispiel das Projekt CSS 3 PIE. Und das macht nichts anderes als eben bestimmte Verzierungen, Dekorationen auch in älteren Internet Explorern nachzubessern. Ich würde im Normalfall davon abraten. Es ist nur ein kleiner Kreis von Nutzern, die den Internet Explorer 8 haben. Und diese würden Sie eigentlich dadurch bestrafen, wenn Sie CSS 3 PIE einsetzen, weil einfach die Performance nicht so gut ist. Und Benutzer, die, wenn sie schon gezwungen sind jetzt einen alten Browser zu benutzen, glaube ich, kommen dann auch damit zurecht, dass irgendeine Ecke nicht abgerundet ist. Aber es ist dann wesentlich störender, wenn die Seite sehr lange zum Laden braucht. Wir haben in diesem Film kurz angeschaut, wie Sie über CSS 3 direkt Bilder einsparen können. Da gibt es zum Einen die Eigenschaft border-radius. Das heißt, Sie brauchen für abgerundete Ecken keine Grafiken mehr. Genauso können Sie mit box-shadow sich Grafiken sparen, wenn Sie irgendeinen Schatten- Effekt haben wollen um Elemente. Text-Schatten ist auch schön, um wirklich Schatten bei Texten zu ergänzen. Früher hätte man da auch Grafiken eingesetzt. Und schließlich gibt es noch die CSS 3 Farbverläufe, wo wir in diesem Fall dann auch keine Grafiken mehr brauchen.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!