10.1 İç-içə dəyişənlər və funksiyalar
Daha mürəkkəb və dinamik üslublara nail olmaq üçün CSS dəyişənləri və funksiyaların birləşmələrindən istifadə edərək, iç-içə dəyişənlər, JavaScript ilə qiymətlərin dinamik dəyişməsi və mürəkkəb gradientlər kimi irəli texnikalardan istifadə edə bilərik. Daha mürəkkəb nümunələrə və texnikalara baxaq.
1. İç-içə dəyişənlər və funksiyalar
Bu nümunədə elementlərin ölçülərini dinamik dəyişmək üçün dəyişənlərin iç-içə istifadəsindən istifadə olunur:
: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. Dinamik rəng çalarlarını dəyişməklə temalaşdırma
hsl()-dən istifadə etməklə temalar yaratmaq və CSS dəyişənləri və JavaScript vasitəsilə rəng çalarlarını dinamik dəyişmək.
Düyməyə kliklədikdə --base-hue dəyişəninin qiyməti dəyişir, bu isə fon rəngini dinamik dəyişir:
: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">Rəngi Dəyiş</button>
// "change-color" id-si olan elementi əldə edirik
document.getElementById('change-color').addEventListener('click', () => {
// Sənədin kök elementini (HTML) əldə edirik
const root = document.documentElement;
// HSL formatında rəng çaları üçün 0-dan 359-a qədər təsadüfi rəqəm yaradırıq
const newHue = Math.floor(Math.random() * 360);
// CSS-in xüsusi dəyişəni olan --base-hue üçün yeni qiymət təyin edirik
// Bu dəyişən çox güman ki, əsas rəngi müəyyən etmək üçün üslublarda istifadə olunur
root.style.setProperty('--base-hue', newHue);
});
10.2 Çətin gradientlər
3. Çoxmərhələli çətin gradientlər
Bu nümunədə çoxmərhələli xətvari gradientdən istifadə olunur, hansı ki, bir neçə rəng dayanaqlarından istifadə edərək çətin fonlar yaradır:
: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. Dinamik uyğunlaşdırılan komponentlərin yaradılması
Ekran ölçüsü və digər amillərdən asılı olaraq öz xüsusiyyətlərini dəyişən uyğun komponentlərin yaradılması üçün CSS dəyişənlərindən və funksiyalarından istifadə.
Uyğun komponent öz boşluqları və fon rəngini ekran ölçüsündən asılı olaraq dəyişir:
<div class="dynamic-component">Dinamik komponent</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 və CSS dəyişənlərindən istifadə edərək gradientlərin yaradılması
JavaScript vasitəsilə əldə olunan məlumatlara əsaslanaraq gradientlərin dinamik yaradılması.
Düyməni basdıqda təsadüfi olaraq yeni rənglər və gradient üçün bucaq yaradılır:
: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>
// "generate-gradient" id-li elementi əldə edirik
document.getElementById('generate-gradient').addEventListener('click', () => {
// Sənədin kök elementini (HTML) əldə edirik
const root = document.documentElement;
// Maksimal doymuşluq və orta parlaqlıqla HSL formatında iki təsadüfi rəng yaradırıq
const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
// Gradient üçün təsadüfi bucaq yaradırıq
const newAngle = `${Math.floor(Math.random() * 360)}deg`;
// Yeni dəyərləri CSS dəyişənlərinə tətbiq edirik
root.style.setProperty('--color1', newColor1);
root.style.setProperty('--color2', newColor2);
root.style.setProperty('--angle', newAngle);
});
10.3 CSS-də dəyişənlərdən dinamik mövzular üçün istifadə
Nümunə 1: CSS-də dəyişənlər və JavaScript vasitəsilə dinamik mövzu dəyişimi
CSS-də dəyişənlərin, seçilmiş mövzuya uyğun olaraq dəyişdirildiyi dinamik mövzu sistemi yaradaq:
: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>Dinamik mövzu dəyişimi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button onclick="switchTheme()">Mövzunu dəyiş</button>
<div class="content">
<h1>Başlıq</h1>
<p>Dinamik mövzu dəyişimi üçün nümunə mətn.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
// Mövzular obyekti təyin edilir
const themes = {
light: {
// İşıqlı mövzu üçün rənglər
'--background-color': '#ffffff', // Fon rəngi
'--text-color': '#000000', // Mətn rəngi
'--primary-color': '#3498db', // Əsas rəng
'--secondary-color': '#2ecc71' // Əlavə rəng
},
dark: {
// Qaranlıq mövzu üçün rənglər
'--background-color': '#2c3e50', // Fon rəngi
'--text-color': '#ecf0f1', // Mətn rəngi
'--primary-color': '#e74c3c', // Əsas rəng
'--secondary-color': '#8e44ad' // Əlavə rəng
}
};
// Hazırda seçilmiş mövzu
let currentTheme = 'light';
// Mövzunu dəyişmək üçün funksiya
function switchTheme() {
// currentTheme dəyərini tərs çeviririk (işıqlı -> qaranlıq, qaranlıq -> işıqlı)
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// Hazırkı mövzu üçün rəngləri olan obyekti alırıq
const theme = themes[currentTheme];
// Mövzu obyektindəki bütün cütlük-ləri (açar-dəyər) keçirik
for (let [variable, value] of Object.entries(theme)) {
// CSS-də dəyişənin dəyərini mövzudan uyğun dəyər olaraq təyin edirik
document.documentElement.style.setProperty(variable, value);
}
}
Nümunə 2: calc(), min(), max() və clamp() ilə şrift ölçüləri və boşluqlar üçün adaptiv dizayn
Pəncərə genişliyindən asılı olaraq dəyişən şrift ölçüləri və boşluqları ilə uyğunlaşa bilən bir layout yaradaq:
: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>Dinamik ölçülər ilə adaptiv dizayn</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="responsive-container">
<h1>Adaptiv başlıq</h1>
<p>Bu mətn, şrift ölçüsünü və boşluqları pəncərə ölçüsünə uyğun dəyişərək adaptasiya olunur.</p>
</div>
</body>
</html>
GO TO FULL VERSION