10.1 Variables et Fonctions Imbriquées
Pour atteindre des styles plus complexes et dynamiques, on peut utiliser des combinaisons de CSS-variables et fonctions avec des techniques avancées comme les variables imbriquées, le changement dynamique de valeurs via JavaScript et des dégradés complexes. Examinons des exemples et techniques plus complexes.
1. Variables et Fonctions Imbriquées
Dans cet exemple, on utilise l'imbrication des variables pour créer des tailles d'éléments changeantes dynamiquement :
: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. Thématisation avec un changement dynamique de teinte
Création de thèmes en utilisant hsl() et changement dynamique des teintes via CSS-variables et JavaScript.
En appuyant sur le bouton, la valeur de --base-hue change, modifiant dynamiquement la couleur de fond :
: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">Change Color</button>
// On récupère l'élément avec l'id "change-color"
document.getElementById('change-color').addEventListener('click', () => {
// On récupère l'élément racine du document (HTML)
const root = document.documentElement;
// On génère un nombre aléatoire entre 0 et 359 pour la teinte en format HSL
const newHue = Math.floor(Math.random() * 360);
// On définit une nouvelle valeur pour la variable CSS personnalisée --base-hue
// Cette variable est probablement utilisée dans les styles pour définir la couleur principale
root.style.setProperty('--base-hue', newHue);
});
10.2 Dégradés Complexes
3. Dégradés Complexes à Niveaux Multiples
Dans cet exemple, on utilise un dégradé linéaire à niveaux multiples pour créer des arrière-plans complexes avec plusieurs arrêts de couleur :
: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. Création de Composants Dynamiques Adaptatifs
Utilisation de CSS-variables et fonctions pour créer des composants adaptatifs qui changent leurs propriétés en fonction de la taille de l'écran et d'autres facteurs.
Le composant adaptatif change ses marges et sa couleur de fond en fonction de la taille de l'écran :
<div class="dynamic-component">Composant Dynamique</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. Génération de dégradés avec JavaScript et CSS-variables
Création dynamique de dégradés basée sur des données obtenues via JavaScript.
En appuyant sur le bouton, de nouvelles couleurs et un nouvel angle pour le dégradé sont générés aléatoirement :
: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">Generate Gradient</button>
<div class="dynamic-gradient">Content</div>
// On récupère l'élément avec l'id "generate-gradient"
document.getElementById('generate-gradient').addEventListener('click', () => {
// On récupère l'élément racine du document (HTML)
const root = document.documentElement;
// On génère deux couleurs aléatoires en format HSL avec saturation maximale et luminosité moyenne
const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
// On génère un angle aléatoire pour le dégradé
const newAngle = `${Math.floor(Math.random() * 360)}deg`;
// On définit de nouvelles valeurs pour les variables CSS personnalisées
root.style.setProperty('--color1', newColor1);
root.style.setProperty('--color2', newColor2);
root.style.setProperty('--angle', newAngle);
});
10.3 Utilisation de CSS-variables pour des thèmes dynamiques
Exemple 1 : Changement de thème dynamique avec CSS-variables et JavaScript
On crée un système de thèmes dynamique où les CSS-variables changent selon le thème choisi :
: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>Changement de thème dynamique</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button onclick="switchTheme()">Changer le thème</button>
<div class="content">
<h1>Titre</h1>
<p>Exemple de texte pour le changement de thème dynamique.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
// On définit un objet de thèmes
const themes = {
light: {
// Couleurs pour le thème clair
'--background-color': '#ffffff', // Couleur de fond
'--text-color': '#000000', // Couleur du texte
'--primary-color': '#3498db', // Couleur principale
'--secondary-color': '#2ecc71' // Couleur secondaire
},
dark: {
// Couleurs pour le thème sombre
'--background-color': '#2c3e50', // Couleur de fond
'--text-color': '#ecf0f1', // Couleur du texte
'--primary-color': '#e74c3c', // Couleur principale
'--secondary-color': '#8e44ad' // Couleur secondaire
}
};
// Thème actuel sélectionné
let currentTheme = 'light';
// Fonction pour changer de thème
function switchTheme() {
// On inverse la valeur de currentTheme (clair -> sombre, sombre -> clair)
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// On récupère l'objet avec les couleurs pour le thème actuel
const theme = themes[currentTheme];
// On parcourt toutes les paires clé-valeur dans l'objet thème
for (let [variable, value] of Object.entries(theme)) {
// On définit la valeur de la variable CSS à la valeur correspondante du thème
document.documentElement.style.setProperty(variable, value);
}
}
Exemple 2 : Design adaptatif utilisant calc(), min(), max() et clamp() pour les tailles de police et les marges
On va créer une mise en page adaptative avec des tailles de police et des marges flexibles qui changent en fonction de la largeur de la fenêtre :
: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>Design adaptatif avec tailles dynamiques</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="responsive-container">
<h1>Titre Adaptatif</h1>
<p>Ce texte s'adapte à la taille de la fenêtre, en changeant les tailles de police et les marges.</p>
</div>
</body>
</html>
GO TO FULL VERSION