10.1 Verschachtelte Variablen und Funktionen
Um komplexere und dynamischere Styles zu erreichen, kann man CSS-Variablen und Funktionen in Kombination mit fortgeschrittenen Techniken wie verschachtelten Variablen, dynamischer Wertänderung über JavaScript und komplexen Gradienten nutzen. Schauen wir uns komplexere Beispiele und Techniken an.
1. Verschachtelte Variablen und Funktionen
In diesem Beispiel wird Verschachtelung von Variablen verwendet, um dynamisch änderbare Elementegrößen zu erzeugen:
:root {
--base-size: 16px;
--scale-factor: 1.5;
--scaled-size: calc(var(--base-size) * var(--scale-factor));
}
.container {
font-size: var(--scaled-size);
padding: calc(var(--scaled-size) / 2);
margin: calc(var(--scaled-size) / 4);
}
2. Thematisierung mit dynamischer Farbtonsänderung
Erstellen von Themes mit hsl() und dynamischer Farbtonänderung über CSS-Variablen und JavaScript.
Beim Klick auf den Button ändert sich der Wert von --base-hue, was die Hintergrundfarbe dynamisch verändert:
:root {
--base-hue: 200;
--saturation: 70%;
--lightness: 50%;
--primary-color: hsl(var(--base-hue), var(--saturation), var(--lightness));
}
body {
background-color: var(--primary-color);
transition: background-color 0.3s;
}
<button id="change-color">Farbe ändern</button>
// Holen des Elements mit der id "change-color"
document.getElementById('change-color').addEventListener('click', () => {
// Holen des root-Elements des Dokuments (HTML)
const root = document.documentElement;
// Generiere eine zufällige Zahl zwischen 0 und 359 für den Farbton im HSL-Format
const newHue = Math.floor(Math.random() * 360);
// Setzen des neuen Werts für die benutzerdefinierte CSS-Variable --base-hue
// Diese Variable wird höchstwahrscheinlich in Stylesheets zur Bestimmung der Primärfarbe verwendet
root.style.setProperty('--base-hue', newHue);
});
10.2 Komplexe Gradienten
3. Komplexe mehrstufige Gradienten
In diesem Beispiel wird ein mehrstufiger linearer Gradient verwendet, der komplexe Hintergründe mit mehreren Farbstopps erzeugt:
:root {
--color-stop1: hsla(200, 100%, 50%, 0.8);
--color-stop2: hsla(340, 100%, 50%, 0.8);
--color-stop3: hsla(120, 100%, 50%, 0.8);
--color-stop4: hsla(60, 100%, 50%, 0.8);
}
.complex-gradient {
background: linear-gradient(
45deg,
var(--color-stop1) 25%,
var(--color-stop2) 25%,
var(--color-stop2) 50%,
var(--color-stop3) 50%,
var(--color-stop3) 75%,
var(--color-stop4) 75%
);
}
4. Erstellung dynamischer adaptiver Komponenten
Verwendung von CSS-Variablen und Funktionen zur Erstellung adaptiver Komponenten, die ihre Eigenschaften in Abhängigkeit von der Bildschirmgröße und anderen Faktoren ändern.
Ein adaptives Element verändert seine Abstände und Hintergrundfarbe je nach Bildschirmgröße:
<div class="dynamic-component">Dynamische Komponente</div>
:root {
--base-padding: 20px;
--scale-factor: 1.5;
--dynamic-padding: calc(var(--base-padding) * var(--scale-factor));
}
@media (max-width: 600px) {
:root {
--scale-factor: 1;
}
}
.dynamic-component {
padding: var(--dynamic-padding);
background-color: hsl(calc(100 + var(--scale-factor) * 50), 100%, 50%);
}
5. Generierung von Gradienten mit JavaScript und CSS-Variablen
Dynamisches Erzeugen von Gradienten basierend auf Daten, die mit JavaScript gewonnen wurden.
Beim Drücken der Taste werden zufällig neue Farben und der Winkel für den Verlauf generiert:
:root {
--color1: hsl(200, 100%, 50%);
--color2: hsl(340, 100%, 50%);
--angle: 45deg;
}
.dynamic-gradient {
background: linear-gradient(var(--angle), var(--color1), var(--color2));
}
<button id="generate-gradient">Verlauf erzeugen</button>
<div class="dynamic-gradient">Inhalt</div>
// Holen des Elements mit der id "generate-gradient"
document.getElementById('generate-gradient').addEventListener('click', () => {
// Holen des root-Elements des Dokuments (HTML)
const root = document.documentElement;
// Zwei Zufallsfarben im HSL-Format mit maximaler Sättigung und mittlerer Helligkeit generieren
const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
// Einen zufälligen Winkel für den Gradient generieren
const newAngle = `${Math.floor(Math.random() * 360)}deg`;
// Neue Werte für benutzerdefinierte CSS-Variablen setzen
root.style.setProperty('--color1', newColor1);
root.style.setProperty('--color2', newColor2);
root.style.setProperty('--angle', newAngle);
});
10.3 Verwendung von CSS-Variablen für dynamische Themes
Beispiel 1: Dynamische Themenwechsel mit CSS-Variablen und JavaScript
Erstellen eines dynamischen Themensystems, bei dem CSS-Variablen je nach ausgewähltem Theme geändert werden:
:root {
--background-color: #ffffff;
--text-color: #000000;
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
padding: 20px;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--secondary-color);
}
.content {
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamischer Themewechsel</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button onclick="switchTheme()">Theme wechseln</button>
<div class="content">
<h1>Überschrift</h1>
<p>Beispieltext für den dynamischen Themewechsel.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
// Definition des Theme-Objekts
const themes = {
light: {
// Farben für das helle Theme
'--background-color': '#ffffff', // Hintergrundfarbe
'--text-color': '#000000', // Textfarbe
'--primary-color': '#3498db', // Primärfarbe
'--secondary-color': '#2ecc71' // Sekundärfarbe
},
dark: {
// Farben für das dunkle Theme
'--background-color': '#2c3e50', // Hintergrundfarbe
'--text-color': '#ecf0f1', // Textfarbe
'--primary-color': '#e74c3c', // Primärfarbe
'--secondary-color': '#8e44ad' // Sekundärfarbe
}
};
// Aktuell gewähltes Theme
let currentTheme = 'light';
// Funktion zum Wechseln des Themas
function switchTheme() {
// Wert von currentTheme invertieren (hell -> dunkel, dunkel -> hell)
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// Theme-Objekt für das aktuelle Theme holen
const theme = themes[currentTheme];
// Alle Schlüssel-Wert-Paare im Theme-Objekt durchlaufen
for (let [variable, value] of Object.entries(theme)) {
// Wert der CSS-Variable auf den entsprechenden Wert aus dem Theme setzen
document.documentElement.style.setProperty(variable, value);
}
}
Beispiel 2: Reaktionsfähiges Design mit Nutzung von calc(), min(), max() und clamp() für Schriftgrößen und Abstände
Erstellen eines adaptiven Layouts mit flexiblen Schriftgrößen und Abständen, die sich je nach Breite des Darstellungsfensters ändern:
:root {
--base-font-size: 16px;
--base-padding: 10px;
--min-font-size: 14px;
--max-font-size: 24px;
--preferred-font-size: 2vw;
--min-padding: 8px;
--max-padding: 20px;
--preferred-padding: 1.5vw;
}
body {
font-size: clamp(var(--min-font-size), var(--preferred-font-size), var(--max-font-size));
padding: clamp(var(--min-padding), var(--preferred-padding), var(--max-padding));
transition: font-size 0.3s, padding 0.3s;
}
.responsive-container {
margin: 0 auto;
max-width: 800px;
padding: calc(var(--base-padding) * 2);
text-align: center;
}
h1 {
font-size: clamp(calc(var(--base-font-size) * 1.5), 3vw, 36px);
}
p {
font-size: clamp(var(--base-font-size), 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reaktionsfähiges Design mit dynamischen Größen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="responsive-container">
<h1>Reaktionsfähige Überschrift</h1>
<p>Dieser Text passt sich der Größe des Darstellungsfensters an, indem sich Schriftgrößen und Abstände ändern.</p>
</div>
</body>
</html>
GO TO FULL VERSION