10.1 Biến và hàm lồng nhau
Để đạt được các phong cách phức tạp và động hơn, có thể sử dụng kết hợp các biến CSS và hàm cùng với các kỹ thuật tiên tiến như biến lồng nhau, thay đổi giá trị động qua JavaScript và gradient phức tạp. Hãy xem xét các ví dụ và kỹ thuật phức tạp hơn.
1. Biến và hàm lồng nhau
Trong ví dụ này, sử dụng biến lồng nhau để tạo kích thước phần tử thay đổi động:
CSS
: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. Theming với thay đổi động sắc thái màu
Tạo theme sử dụng hsl() và thay đổi sắc thái động qua biến CSS và JavaScript.
Khi nhấn vào nút, giá trị --base-hue thay đổi, làm cho màu nền thay đổi động:
CSS
: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;
}
HTML
<button id="change-color">Change Color</button>
JavaScript
// Lấy phần tử với id "change-color"
document.getElementById('change-color').addEventListener('click', () => {
// Lấy phần tử gốc của tài liệu (HTML)
const root = document.documentElement;
// Tạo số ngẫu nhiên từ 0 đến 359 cho sắc thái màu trong định dạng HSL
const newHue = Math.floor(Math.random() * 360);
// Thiết lập giá trị mới cho biến CSS --base-hue
// Biến này có thể được sử dụng trong style để xác định màu chính
root.style.setProperty('--base-hue', newHue);
});
10.2 Gradient phức tạp
3. Gradient nhiều lớp phức tạp
Trong ví dụ này, sử dụng gradient tuyến tính nhiều lớp, tạo nền phức tạp với nhiều màu dừng:
CSS
: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. Tạo các thành phần động thích ứng
Sử dụng biến CSS và hàm để tạo các thành phần thích ứng, thay đổi thuộc tính của chúng tùy thuộc vào kích thước màn hình và các yếu tố khác.
Thành phần thích ứng thay đổi padding và màu nền tùy thuộc vào kích thước màn hình:
HTML
<div class="dynamic-component">Thành phần động</div>
CSS
: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. Tạo gradient sử dụng JavaScript và biến CSS
Tạo gradient động dựa trên dữ liệu thu được thông qua JavaScript.
Khi nhấn vào nút, các màu mới và góc cho gradient được tạo ngẫu nhiên:
CSS
:root {
--color1: hsl(200, 100%, 50%);
--color2: hsl(340, 100%, 50%);
--angle: 45deg;
}
.dynamic-gradient {
background: linear-gradient(var(--angle), var(--color1), var(--color2));
}
HTML
<button id="generate-gradient">Generate Gradient</button>
<div class="dynamic-gradient">Content</div>
JavaScript
// Lấy phần tử với id "generate-gradient"
document.getElementById('generate-gradient').addEventListener('click', () => {
// Lấy phần tử gốc của tài liệu (HTML)
const root = document.documentElement;
// Tạo hai màu ngẫu nhiên trong định dạng HSL với độ bão hòa tối đa và độ sáng trung bình
const newColor1 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
const newColor2 = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
// Tạo ngẫu nhiên góc cho gradient
const newAngle = `${Math.floor(Math.random() * 360)}deg`;
// Thiết lập giá trị mới cho biến CSS tùy chỉnh
root.style.setProperty('--color1', newColor1);
root.style.setProperty('--color2', newColor2);
root.style.setProperty('--angle', newAngle);
});
10.3 Sử dụng biến CSS cho theme động
Ví dụ 1: Thay đổi theme động với biến CSS và JavaScript
Tạo hệ thống theme động, nơi các biến CSS sẽ thay đổi tùy thuộc vào theme đã chọn:
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;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi theme động</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button onclick="switchTheme()">Thay đổi theme</button>
<div class="content">
<h1>Tiêu đề</h1>
<p>Ví dụ văn bản cho thay đổi theme động.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
// Định nghĩa đối tượng theme
const themes = {
light: {
// Màu sắc cho theme sáng
'--background-color': '#ffffff', // Màu nền
'--text-color': '#000000', // Màu chữ
'--primary-color': '#3498db', // Màu chính
'--secondary-color': '#2ecc71' // Màu phụ
},
dark: {
// Màu sắc cho theme tối
'--background-color': '#2c3e50', // Màu nền
'--text-color': '#ecf0f1', // Màu chữ
'--primary-color': '#e74c3c', // Màu chính
'--secondary-color': '#8e44ad' // Màu phụ
}
};
// Theme hiện tại được chọn
let currentTheme = 'light';
// Hàm để chuyển đổi theme
function switchTheme() {
// Đảo ngược giá trị của currentTheme (sáng -> tối, tối -> sáng)
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// Lấy đối tượng màu cho theme hiện tại
const theme = themes[currentTheme];
// Duyệt qua tất cả cặp key-value trong đối tượng theme
for (let [variable, value] of Object.entries(theme)) {
// Thiết lập giá trị biến CSS cho giá trị tương ứng từ theme
document.documentElement.style.setProperty(variable, value);
}
}
Ví dụ 2: Thiết kế thích ứng với calc(), min(), max() và clamp() cho kích thước phông chữ và padding
Tạo bố cục thích ứng với kích thước phông chữ và padding linh hoạt, những cái thay đổi tùy thuộc vào độ rộng của cửa sổ hiển thị:
CSS
: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);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thiết kế thích ứng với kích thước động</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="responsive-container">
<h1>Tiêu đề thích ứng</h1>
<p>Văn bản này thích ứng với kích thước cửa sổ hiển thị, thay đổi kích thước phông chữ và padding.</p>
</div>
</body>
</html>
GO TO FULL VERSION