Wie kann ich CSS-Farbtöne mithilfe von Variablen und relativer Farbsyntax erstellen?

CSS-Farbtöne mit Variablen erstellen

Das Erreichen der Funktionalität der Funktion „darken()“ von Sass innerhalb von CSS-Variablen ist durch die neue relative Farbsyntax möglich .

Definieren Sie die Primärfarbvariable (--color-primary) in einem beliebigen Format. Verwenden Sie für jeden Farbton die Funktion hsl() und calc(), um die Helligkeitskomponente (l) der Primärfarbe anzupassen. Um beispielsweise einen 5 % dunkleren Farbton zu erstellen:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

Erstellen Sie auf ähnliche Weise einen 10 % dunkleren Farbton:

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

Weisen Sie --color-primary dem Hintergrund des Elements zu. Wenden Sie dann --color-primary-darker und --color-primary-darkest auf die Status „Hover“, „Fokus“ und „Aktiv“ an.

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

Dieser Ansatz bietet Flexibilität bei der Definition von Farbtönen und vereinfacht den Prozess Erstellen konsistenter Farbschemata innerhalb eines CSS-Variablensystems.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Farbtöne mithilfe von Variablen und relativer Farbsyntax erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!