Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Farbverläufe optimieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Internet stehen verschiedene Tools sowie Hilfestellungen zur Verfügung, um die Erstellung von Farbverläufen in CSS deutlich zu optimieren.

Transkript

Die Erstellung eines CSS3 Farbverlaufs ist gar nicht so schwierig, wie Sie gesehen haben. Hier in der Navigation und hier bei dem Sie sind hier und auch beim Hovern. Wenn es darum geht jetzt eigene Farbverläufe zu erstellen, dann sind ein bisschen mehr Basisinformationen nicht schlecht. Hier sehen Sie auf Deutsch eine kurze Referenz beiwiki.selfhtml.org/ wiki/linear-gradient (). Auf Deutsch hier die Basissyntax mit ein paar Beispielen, linear-gradient (white, black), (42degree, Grad, transparent, blue), die Beispiele kann man sich hier anschauen. Hier sieht man die verschiedenen Farbverläufe. Auf Englisch gibt es eine sehr sehr ausführliche Referenz von Sara Soueidan bei tympanus.net/ codrops/css_reference/linear-gradient. Hier wird am Anfang erstmal das Konzept erklärt, also hier ist ein Beispiel from yellow to purple deutlich zu sehen, dann wird erstmal das Konzept erklärt und die ganzen Begrifflichkeiten was bedeutet überhaupt Gradient und so weiter und etwas weiter unten wird es dann richtig interessant mit der genauen Syntax. Specifying Color Stops, also die Stops für die Farbverläufe zu genieren. Es geht los: linear-gradient ( ), dann kommt angle/direction, das ist am einfachsten mit den Keywords zu operieren, wie wir gesehen haben to right, to bottom, to top oder to top right man kann das auch kombinieren und dann gibt man 2 Farben an. Hier color stop, color stop und der Stop also die Prozentzahl, die Sie ich hier benutzt haben die ist genau genommen optional. Wenn man die weglässt, dann beginnt es mit 0% und hört bei 100% auf aber mit den Prozentzahlen ist es deutlicher zu lesen, weil man da genau weiß wo welche Farbe beginnt und aufhört. So hier ist to right mit drei Farben. Yellow, 096, Grünton und purple. Sie sehen der Browser bestimmt die Übergänge selbst. Sie geben ihn nur 3 Farben vor und er sagt wo die Übergänge anfangen und aufhören. So, und jetzt sehen Sie hier mit 20% soll das grüne anfangen, statt wenn Sie gar nicht sagen bei 50% und dadurch verschiebt sich der Farbverlauf, das kann man also mit diesen Prozentangaben sehr schön machen. Sie sehen jetzt hier von 20 bis 80 bleibt es grün, mit der Solidenfarbe ohne Verlauf , und dann geht der Verlauf rüber zu lila, sehr deutliche Farben. So, und wenn man das noch einen Schritt weitertreibt, dann hat man eigentlich gar nicht mehr einen Farbverlauf, sondern drei scharfe verschiedene Farben. So könnte man zum Beispiel Flaggen bauen, to right, yellow und yellow bis 20%, dann ab 20% grün bis 80% und purple ab 80% bis 100%. Wenn nichts dahinter steht ist es dann 100%. Sara Soueidan erläutert das hier sehr genau und sehr ausführlich. Wenn man die Grundkonzepte verstanden hat, kommt man, denke ich, mit dem Englisch auch ganz gut klar. Die nächste Frage beim erstellen von Farbverläufen ist natürlich wie kompatibel ist das Ganze überhaupt und da rufe ich hier einmal caniuse.com auf und da sehen Sie hier caniuse.com css -gradients. IE 8 und 9 verstehen das gar nicht, 10, 11 und Edge verstehen es, die anderen Browser verstehen es schon länger. Im IE 8 und 9 könnte man Ersatz schaffen, entweder mit Farbverlaufgrafiken oder mit Filtern, aber es ist meistens einfacher einfach platte normale Farben zu nehmen. Und apropos Farben, woher bekommt man jetzt die ganzen Farbtöne? Da gibt es hier zum Beispiel Colorhexa.com. Wenn ich hier ein Farbton eingebe, wie ffeda0, dann kann ich hier weiter unten auf der Seite jede Menge Informationen zu dieser Farbe lesen und unter anderem auch Farbabstufungen, also so etwas, was Sie in der Navigation gesehen haben, hier sind noch sehr viel mehr Shades and Tints auf ffeda0. Also so wie wir hier gemacht haben von einem Gelbton zu einem helleren Gelbton. Diese Farben könnte man sich hier rauspicken und schauen wie die Farbverläufe dann aussehen. Wenn man die Farbverläufe nicht von Hand bauen möchte, dann gibt es den Ultimate CSS Gradient Generator vom Macher von ColorZilla einem Firefox und Chrome Add-on, das eigentlich in jeden Werkzeugkasten gehört, zu Auswahl von Farben auf Webseiten, Dieser Gradient Generator ist ein bisschen gewöhnungsbedürftig. Er erzeugt eine sehr sehr ausführliche Syntax. Sie brauchen eigentlich nur die hier hervorgehobene Zeile, es sei denn, Sie wollen noch ältere Browser versorgen, dann wird es aber sehr unübersichtlich. Man muss das einfach mal ausprobieren. Die wichtigste Zeile ist die normale Syntax. Wenn ich die Kommentare einschalte hier, wohinter steht W3C, also der Standard hier, das ist die wichtigste Zeile. Hiermit kann man Presets nehmen, man kann hier Stop setzen, man kann hier Farben auswählen. Das erfordert einfach ein bisschen Spielerei und dann bekommt man schon einen fertigen Farbverlauf. Und ganz fertige Farbverläufe können Sie sich auf Gradients.io angucken. Hier sind sehr schön gemachte Farbverläufe, die gar nicht so schwierig sind und wenn man einen hübsch findet, dann kann man sich genau anschauen wie der gebaut worden ist. Der ist hervorgehoben, gradient_swatch und hier sehen Sie dann schon den Farbverlauf, da ist der background-image:linear-gradient, 45 deg, also schräg nach oben von diesem Rotton zu diesem Orangeton. Hier kann man also nicht nur sehen, ob es hübsch aussieht, sondern auch sehen wie es gebaut wurde.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 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!