10.1 Вкладені змінні та функції
Для досягнення більш складних і динамічних стилів можна використовувати комбінації CSS-змінних і функцій разом із передовими техніками, такими як вкладені змінні, динамічна зміна значень через JavaScript і складні градієнти. Розглянемо більш складні приклади та техніки.
1. Вкладені змінні та функції
У цьому прикладі використовується вкладення змінних для створення динамічно змінних розмірів елементів:
: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. Темізація з динамічною зміною відтінку кольору
Створення тем за допомогою hsl() і динамічного зміни відтінків через CSS-змінні та JavaScript.
При натисканні на кнопку змінюється значення --base-hue, що динамічно змінює колір фону:
: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>
// Отримуємо елемент з id "change-color"
document.getElementById('change-color').addEventListener('click', () => {
// Отримуємо кореневий елемент документа (HTML)
const root = document.documentElement;
// Генеруємо випадкове число від 0 до 359 для відтінку кольору у форматі HSL
const newHue = Math.floor(Math.random() * 360);
// Встановлюємо нове значення для користувацької змінної CSS --base-hue
// Ця змінна, скоріш за все, використовується в стилях для визначення основного кольору
root.style.setProperty('--base-hue', newHue);
});
10.2 Складні градієнти
3. Складні багаторівневі градієнти
У цьому прикладі використовується багаторівневий лінійний градієнт, який створює складні фони з використанням кількох кольорових стопів:
: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. Створення динамічних адаптивних компонентів
Використання CSS-змінних і функцій для створення адаптивних компонентів, які змінюють свої властивості залежно від розміру екрану та інших факторів.
Адаптивний компонент змінює свої відступи та колір фону залежно від розміру екрану:
<div class="dynamic-component">Динамічний компонент</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. Генерація градієнтів з використанням JavaScript і CSS-змінних
Динамічне створення градієнтів на основі даних, отриманих за допомогою JavaScript.
При натисканні на кнопку випадковим чином генеруються нові кольори та кут для градієнта:
: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>
// Отримуємо елемент з id "generate-gradient"
document.getElementById('generate-gradient').addEventListener('click', () => {
// Отримуємо кореневий елемент документа (HTML)
const root = document.documentElement;
// Генеруємо два випадкових кольори у форматі HSL з максимальною насиченістю та середньою яскравістю
const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
// Генеруємо випадковий кут для градієнта
const newAngle = `${Math.floor(Math.random() * 360)}deg`;
// Встановлюємо нові значення для користувацьких CSS змінних
root.style.setProperty('--color1', newColor1);
root.style.setProperty('--color2', newColor2);
root.style.setProperty('--angle', newAngle);
});
10.3 Використання CSS-змінних для динамічних тем
Приклад 1: Динамічна зміна теми за допомогою CSS-змінних і JavaScript
Створимо динамічну систему тем, де CSS-змінні будуть змінюватися залежно від обраної теми:
: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>Динамічна зміна теми</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button onclick="switchTheme()">Змінити тему</button>
<div class="content">
<h1>Заголовок</h1>
<p>Приклад тексту для динамічної зміни теми.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
// Визначаємо об'єкт тем оформлення
const themes = {
light: {
// Кольори для світлої теми
'--background-color': '#ffffff', // Колір фону
'--text-color': '#000000', // Колір тексту
'--primary-color': '#3498db', // Основний колір
'--secondary-color': '#2ecc71' // Додатковий колір
},
dark: {
// Кольори для темної теми
'--background-color': '#2c3e50', // Колір фону
'--text-color': '#ecf0f1', // Колір тексту
'--primary-color': '#e74c3c', // Основний колір
'--secondary-color': '#8e44ad' // Додатковий колір
}
};
// Поточно обрана тема
let currentTheme = 'light';
// Функція для переключення теми
function switchTheme() {
// Інвертуємо значення currentTheme (світла -> темна, темна -> світла)
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// Отримуємо об'єкт з кольорами для поточної теми
const theme = themes[currentTheme];
// Перебирамо всі пари ключ-значення в об'єкті теми
for (let [variable, value] of Object.entries(theme)) {
// Встановлюємо значення CSS-змінної на відповідне значення з теми
document.documentElement.style.setProperty(variable, value);
}
}
Приклад 2: Адаптивний дизайн з використанням calc(), min(), max() та clamp() для розмірів шрифтів та відступів
Створимо адаптивний макет з гнучкими розмірами шрифтів і відступами, які змінюються в залежності від ширини вікна перегляду:
: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>Адаптивний дизайн з динамічними розмірами</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="responsive-container">
<h1>Адаптивний заголовок</h1>
<p>Цей текст адаптується під розмір вікна перегляду, змінюючи розміри шрифту та відступи.</p>
</div>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ