Hallo, liebe Entwickler! Heute tauchen wir in die Welt der CSS-Farbfunktionen ein. Sie haben vielleicht CSS verwendet, um die Farbe eines Elements auf einer Webseite zu ändern, aber haben Sie schon einmal von CSS-Farbfunktionen gehört? Wenn nicht, schnallen Sie sich an, denn Sie werden gleich etwas Neues und Super Nützliches lernen! Beginnen wir mit einem Zitat, das ich gestern gelesen habe . GoodReads Die Farbe ist die Tastatur, die Augen sind die Harmonien, die Seele ist das Klavier mit vielen Saiten. Der Künstler ist die Hand, die spielt, indem sie die eine oder andere Taste berührt, um Schwingungen in der Seele hervorzurufen. Was genau sind CSS-Farbfunktionen? CSS-Farbfunktionen sind eine Möglichkeit, Farben in CSS mithilfe mathematischer Funktionen und nicht nur eines einfachen Farbcodes anzugeben. Die Funktionen bieten mehr Kontrolle und Flexibilität über die in Ihrem Stylesheet verwendeten Farben. Mit Farbfunktionen können Sie , , und einer Farbe anpassen und sogar zwei oder mehr Farben miteinander mischen. Farbton Sättigung Helligkeit Deckkraft Es stehen mehrere CSS-Funktionen zur Verfügung. Schauen wir uns einige an: – Es nimmt drei Werte an, die jeweils Rot, Grün und Blau darstellen, und gibt eine Farbe zurück. Die Werte können zwischen 0 und 255 liegen. Beispiel: ergibt eine rote Farbe. rgb() color: rgb(255, 0, 0) – Es ähnelt , ermöglicht Ihnen jedoch auch das Festlegen der Deckkraft der Farbe. Der vierte Wert, Alpha, kann zwischen 0 und 1 liegen. Beispiel: ergibt eine halbtransparente rote Farbe. rgba() rgb() color: rgba(255, 0, 0, 0.5) – Es nimmt drei Werte an, die Farbton, Sättigung und Helligkeit darstellen, und gibt eine Farbe zurück. Beispiel: ergibt eine rote Farbe. hsl() color: hsl(0, 100%, 50%) – Es ähnelt , ermöglicht Ihnen jedoch auch das Festlegen der Deckkraft der Farbe. Beispiel: ergibt eine halbtransparente rote Farbe. hsla() hsl() color: hsla(0, 100%, 50%, 0.5) – Ermöglicht das Mischen zweier Farben mit einem optionalen Gewichtsparameter. Beispiel: ergibt einen Lila-Ton. mix() color: mix(red, blue) Lassen Sie uns mehr über sie erfahren. RGB() Okay, lasst uns unsere Reise in die Welt der CSS-Farbfunktionen fortsetzen und in die RGB-Funktion eintauchen. Die RGB-Funktion ist eine der am häufigsten verwendeten Farbfunktionen in CSS, und das aus gutem Grund! Es ist leicht zu verstehen und gibt Ihnen viel Kontrolle über die Farben, die Sie auf Ihrer Website verwenden. Die RGB-Funktion nimmt drei Werte an, die jeweils die Intensität von darstellen Rot, grün, und blau bzw. Diese Werte können zwischen 0 und 255 liegen. Durch das Mischen unterschiedlicher Intensitäten von Rot, Grün und Blau können Sie jede gewünschte Farbe erzeugen. Beispiel: Für rote Farbe – rgb(255, 0, 0) Für grüne Farbe – rgb(0, 255, 0) Für blaue Farbe – rgb(0, 0, 255) div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/ HSL() Okay, kommen wir zu einer weiteren nützlichen Farbfunktion in CSS – der HSL-Funktion! Die HSL-Funktion ähnelt der RGB-Funktion, verwendet jedoch anstelle von Werten für Rot, Grün und Blau Werte für: Farbton, Sättigung und Leichtigkeit. Dies macht es etwas einfacher zu verstehen und zu verwenden, insbesondere für diejenigen, die noch keine Erfahrung damit haben . Farben Lehre Der Farbtonwert in der HSL-Funktion stellt die dar, mit Werten zwischen 0 und 360. Farbe selbst Der 0 steht für Rot, ein Farbtonwert von 120 für Grün und ein Farbtonwert von 240 für Blau. Farbtonwert Der in der HSL-Funktion stellt die Intensität der Farbe dar, wobei die Werte zwischen 0 % und 100 % liegen. Ein Sättigungswert von 100 % bedeutet, dass die Farbe vollständig gesättigt ist, während ein Wert von 0 % bedeutet, dass die Farbe grau ist. Sättigungswert Der in der HSL-Funktion stellt die Helligkeit der Farbe dar, wobei die Werte zwischen 0 % und 100 % liegen. Ein Helligkeitswert von bedeutet, dass die Farbe ein ist, während ein Wert von bedeutet, dass die Farbe und ein Wert von bedeutet, dass die Farbe ist. Helligkeitswert 50% neutrales Grau 100% vollständig hell ist, 0% vollständig dunkel div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */ RGBA() Okay Leute, reden wir über die RGBA-Funktion! Die RGBA-Funktion ähnelt der RGB-Funktion, verfügt jedoch über einen zusätzlichen Bonus: Damit können Sie die einer Farbe festlegen. Deckkraft Dies kann nützlich sein, wenn Sie Ihren Elementen einen verleihen möchten, beispielsweise wenn eine Hintergrundfarbe teilweise transparent sein soll. durchscheinenden Effekt Die RGBA-Funktion nimmt vier Werte an, wobei die ersten drei wie die RGB-Funktion die Rot-, Grün- und Blauwerte sind. Der vierte Wert ist der , der die Deckkraft der Farbe darstellt und zwischen 0 und 1 liegt. Alpha-Wert Ein Wert von 0 bedeutet, dass die Farbe vollständig transparent ist, während ein Wert von 1 bedeutet, dass die Farbe vollständig undurchsichtig ist. div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */ HSLA() Okay Leute, reden wir über die HSLA-Funktion! Die HSLA-Funktion ähnelt der HSL-Funktion, verfügt jedoch über einen zusätzlichen Vorteil: Sie ermöglicht es Ihnen, die Deckkraft einer Farbe festzulegen. Dies kann nützlich sein, wenn Sie Ihren Elementen einen verleihen möchten, beispielsweise wenn eine Hintergrundfarbe teilweise transparent sein soll. durchscheinenden Effekt Die HSLA-Funktion nimmt vier Werte an, wobei die ersten drei die Werte für Farbton, Sättigung und Helligkeit sind, genau wie die HSL-Funktion. Der vierte Wert ist der Alpha-Wert, der die Deckkraft der Farbe darstellt und zwischen 0 und 1 liegt. Ein Wert von 0 bedeutet, dass die Farbe vollständig transparent ist, während ein Wert von 1 bedeutet, dass die Farbe vollständig undurchsichtig ist. div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */ Es ist alles das Gleiche. A bedeutet Alpha, das uns (Alpha-Wert von 0,75) für den durchscheinenden Effekt in beiden Funktionen zur Verfügung stellt, einfach. Benutzerdefinierte Eigenschaften oder CSS-Variablen Lassen Sie uns nun über benutzerdefinierte Eigenschaften in CSS sprechen, die auch als CSS-Variablen bezeichnet werden. Mit benutzerdefinierten Eigenschaften können Sie Werte speichern, die Sie im gesamten Stylesheet wiederverwenden können. Dadurch wird die Pflege Ihrer Stile einfacher und Ihr Code übersichtlicher und flexibel. modular Um eine benutzerdefinierte Eigenschaft zu erstellen, verwenden Sie einfach die Syntax gefolgt vom Eigenschaftsnamen und einem Wert -- :root { --primary-color: blue; } Hier haben wir eine benutzerdefinierte Eigenschaft namens mit dem Wert erstellt. --primary-color blue Um diese benutzerdefinierte Eigenschaft zu verwenden, können Sie nun die Funktion in Ihren CSS-Selektoren verwenden. var() button { background-color: var(--primary-color); } Der obige Code setzt die Hintergrundfarbe aller -Elemente auf Blau, da wir die benutzerdefinierte Eigenschaft verwenden. <button> --primary-color Wenn wir den Wert von ändern möchten, müssen wir ihn nur an einer Stelle ändern und er wird im gesamten Verlauf automatisch aktualisiert . --primary-color Stylesheet Zu den Vorteilen der Verwendung benutzerdefinierter Eigenschaften gehören: : Anstatt Werte im gesamten Stylesheet zu wiederholen, können Sie Werte in benutzerdefinierten Eigenschaften speichern und sie bei Bedarf wiederverwenden. Code-Wiederverwendung : Benutzerdefinierte Eigenschaften erleichtern die Pflege Ihrer Stile, da Sie Werte nur an einer Stelle aktualisieren müssen. Wartbarkeit : Mit benutzerdefinierten Eigenschaften können Sie das Erscheinungsbild Ihrer Website ändern, indem Sie Werte an einer Stelle ändern, anstatt Änderungen in mehreren Selektoren vorzunehmen. Flexibilität Best Practices für CSS-Farbfunktionen Okay, lassen Sie uns über Best Practices für die Verwendung von CSS-Farbfunktionen in Ihren Projekten sprechen. Diese Tipps helfen Ihnen dabei, ein einheitliches und optisch ansprechendes Erscheinungsbild zu schaffen für Ihre Website und stellen Sie sicher, dass Ihre Farben für alle Benutzer lesbar und zugänglich sind. Farbpalette Erstellen einer Farbpalette für Ihre Website: Eines der ersten Dinge, die Sie bei der Arbeit mit CSS-Farben tun sollten, ist die Erstellung einer Farbpalette für Ihre Website. Dies kann so einfach sein wie die Auswahl einiger Farben, die Ihnen gefallen und die gut zusammenpassen. Sie können RGB-, HSL-, RGBA- oder HSLA-Funktionen verwenden, um Ihre Farben zu definieren. Ein guter Anfang ist es, eine Hauptfarbe auszuwählen und dann zwei bis drei Akzentfarben auszuwählen, um diese zu ergänzen. :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); } Verwenden von CSS-Farbfunktionen für Kontrast und Hierarchie: Es ist wichtig, Farben zu verwenden, um in Ihren Designs Kontrast und Hierarchie zu schaffen. Sie können beispielsweise eine hellere Farbe für Ihren Hintergrund und eine dunklere Farbe für Ihren Text verwenden, um sicherzustellen, dass er gut lesbar ist. Sie können Farbe auch verwenden, um die Aufmerksamkeit auf bestimmte Elemente wie Schaltflächen oder Links zu lenken. body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); } Testen von Farbfunktionen auf Lesbarkeit und Barrierefreiheit: Abschließend ist es wichtig, Ihre Farben auf Lesbarkeit und Zugänglichkeit zu testen. Stellen Sie sicher, dass Ihre Farben ausreichend Kontrast haben, damit sie gut lesbar sind, insbesondere für Benutzer mit Farbsehbehinderungen. Sie können Online-Tools verwenden, um den Kontrast Ihrer Farben zu überprüfen und sicherzustellen, dass sie den Barrierefreiheitsstandards entsprechen. WebAIM-Kontrastprüfer Muzli-Farbpalettengenerator Experte – Kontrastprüfer coolors - Palettengenerator Canva-Palettengenerator Erweiterte Techniken für CSS-Farbfunktionen In diesem Abschnitt befassen wir uns mit einigen fortgeschrittenen Techniken mit CSS-Farbfunktionen. Verwenden von CSS-Variablen für dynamische Farbschemata Wollten Sie schon immer das Farbschema Ihrer Website mit nur wenigen Codezeilen ändern? Mit CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, ist das möglich! Sie können eine Reihe von Variablen erstellen, um Ihre Farbpalette zu speichern und diese dann im gesamten Stylesheet zu verwenden. Auf diese Weise müssen Sie, wenn Sie Ihr Farbschema jemals ändern möchten, nur die Werte in Ihren Variablen aktualisieren. :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); } In diesem Beispiel haben wir zwei benutzerdefinierte Eigenschaften für unsere Primär- und Sekundärfarben erstellt. Wir haben sie dann verwendet, um unsere und Elemente zu gestalten. h1 button Animationen mit CSS-Farbfunktionen erstellen Eines der coolen Dinge, die Sie mit CSS-Farbfunktionen machen können, ist, sie zu animieren! Sie können sanfte Übergänge zwischen den Farben erstellen, um Ihrer Website etwas Dynamik zu verleihen. Sie könnten beispielsweise dafür sorgen, dass eine Schaltfläche ihre Farbe ändert, wenn ein Benutzer mit der Maus darüber fährt. button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); } Hier haben wir die Standardhintergrundfarbe unserer Schaltfläche auf einen grünen Farbton ( ) festgelegt und einen Übergang hinzugefügt, damit sich die Farbe reibungslos ändert, wenn der Mauszeiger über die Schaltfläche bewegt wird. hsl(120, 100%, 50%) Wir haben die Farbe für den Schwebezustand in einen blauen Farbton ( ) geändert. hsl(240, 100%, 50%) Verwenden von CSS-Farbfunktionen für Farbverläufe und Transparenz Eine weitere tolle Sache, die Sie mit CSS-Farbfunktionen machen können, ist die Erstellung von Farbverläufen und Transparenz. Mit den RGBA- und HSLA-Farbfunktionen können Sie halbtransparente Farben erstellen und diese dann zu Farbverläufen kombinieren. .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); } Hier haben wir einen linearen Farbverlauf erstellt, der von einer roten RGBA-Farbe zu einer grünen HSLA-Farbe reicht. Beide Farben haben einen Alphawert von 0,5 und sind somit halbtransparent. Und da haben Sie es! Einige fortgeschrittene Techniken mit CSS-Farbfunktionen. Viel Spaß beim Experimentieren mit diesen Techniken und lassen Sie Ihrer Kreativität freien Lauf! Ressourcen caniuse.com [Unterstützungstabellen für HTML5, CSS3] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl https://developer.mozilla.org/en-US/docs/Web/CSS/color_value Abschluss Abschließend hoffe ich, dass diese Einführung Ihnen beim Einstieg in die CSS-Farbfunktionen und benutzerdefinierten Eigenschaften geholfen hat. Dies sind leistungsstarke Tools, die Ihren CSS-Code flexibler, wartbarer und einfacher zu handhaben machen können. Viel Spaß beim Codieren!
