Bài giảng: CSS3 NÂNG CAO

1. Hiệu ứng trong CSS3

1.1. Transitions (Hiệu ứng chuyển đổi)

• Giúp tạo hiệu ứng chuyển đổi mềm mại giữa các trạng thái CSS.
• Thuộc tính chính và tham số:
  • transition-property: Thuộc tính CSS được thay đổi (all, background-color, transform...).
  • transition-duration: Thời gian chuyển đổi (0.5s, 1s, ...).
  • transition-timing-function: Kiểu chuyển đổi quy định tốc độ thay đổi trong suốt quá trình:
    • linear: Tốc độ thay đổi đều đặn suốt quá trình.
    • ease: Bắt đầu chậm, nhằm tốc độ giữa rồi chậm lại cuối.
    • ease-in: Chạy chậm đầu, nhằm tốc đần cuối.
    • ease-out: Chạy nhanh ban đầu rồi chậm dần.
    • ease-in-out: Chạy chậm lúc đầu và cuối, nhanh ở giữa.
  • transition-delay: Thời gian trì hoãn (0s, 0.5s, ...).

Ví dụ:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}
.box:hover {
  background-color: blue;
}

1.2. Animations (Hoạt động)

• Tạo hiệu ứng chuyển động phức tạp hơn.
• Thuộc tính chính và tham số:
  • @keyframes: Xác định các bước trong hoạt động.
  • animation-name: Tên hoạt động.
  • animation-duration: Thời gian chạy (1s, 2s, ...).
  • animation-timing-function: Kiểu di chuyển (ease, linear, ...).
  • animation-delay: Thời gian trì hoãn (0s, 1s, ...).
  • animation-iteration-count: Số lần lặp (1, infinite, ...).
  • animation-direction: Hướng chạy (normal, reverse, alternate).

Ví dụ:

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite alternate;
}

 3. Tham số trong css

3.1. Giới thiệu về tham số trong CSS

Tham số trong CSS giúp bạn tái sử dụng giá trị và làm cho mã CSS linh hoạt hơn. Có ba cách chính để sử dụng tham số trong CSS:

• Biến CSS (CSS Variables)
• Tham số trong CSS Preprocessors (SASS, LESS)
• Custom Properties (Biến tự định nghĩa)

3.2. Biến CSS (CSS Variables)

a) Khai báo biến CSS

Biến CSS được khai báo bằng --tên-biến và sử dụng với var().

Ví dụ:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

body {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size);
}

button {
    background-color: var(--secondary-color);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

🔥 Lợi ích: Dễ dàng thay đổi toàn bộ giao diện chỉ bằng cách chỉnh sửa giá trị của biến.

b) Biến cục bộ và biến toàn cục

• Biến toàn cục: Được khai báo trong :root, áp dụng cho toàn bộ trang.
• Biến cục bộ: Chỉ áp dụng trong phạm vi của một phần tử cụ thể.

Ví dụ biến cục bộ:

.card {
    --card-bg: #f1c40f;
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 5px;
}

3.3. CSS Preprocessors (SASS, LESS)

CSS Preprocessors như SASS và LESS cho phép sử dụng tham số dưới dạng biến.

a) Sử dụng biến trong SASS

$primary-color: #e74c3c;
$text-color: #ffffff;

body {
    background-color: $primary-color;
    color: $text-color;
}

💡 Lợi ích: Biến trong SASS hỗ trợ tính toán, lồng nhau, mixins, giúp CSS mạnh mẽ hơn.

b) Sử dụng biến trong LESS

@primary-color: #8e44ad;
@text-color: #ecf0f1;

body {
    background-color: @primary-color;
    color: @text-color;
}

3.4. Custom Properties và Tính Toán

Biến CSS có thể kết hợp với calc() để thực hiện tính toán.

Ví dụ:

:root {
    --base-size: 10px;
}

.container {
    width: calc(var(--base-size) * 20);
    padding: calc(var(--base-size) * 2);
}

🔥 Ứng dụng: Giúp tạo giao diện responsive linh hoạt.