BÀI 5: HIỆU ỨNG GIAO DIỆN VỚI CSS3

Tháng Một 8, 2026
 |  Không có bình luận

5.1. Trang trí giao diện hiện đại (CSS3 Decoration)

5.1.1. Bo tròn góc (border-radius)

  • Chức năng: Biến các góc vuông sắc cạnh trở nên mềm mại hơn.

  • Cú pháp:

    CSS
     
    .hop {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 10px; /* Bo tròn 4 góc 10px */
}

  • Mẹo đặc biệt (Tạo hình tròn): Muốn biến một hình vuông thành hình tròn tuyệt đối, ta đặt border-radius: 50%.

    • Ví dụ: Dùng làm Avatar (ảnh đại diện) người dùng.

5.1.2. Đổ bóng (box-shadow)

  • Chức năng: Tạo chiều sâu cho đối tượng, giúp nó trông như đang “nổi” lên khỏi màn hình (Phong cách Material Design của Google).

  • Cú pháp: box-shadow: [ngang] [dọc] [độ nhòe] [màu sắc];

  • Ví dụ:

    CSS
     
    .the-san-pham {
    box-shadow: 5px 5px 10px gray;
}

    • Giải thích: Bóng đổ về bên phải 5px, xuống dưới 5px, độ nhòe (mờ) là 10px, bóng màu xám.

5.1.3. Màu chuyển sắc (linear-gradient)

  • Chức năng: Thay vì tô một màu đơn sắc (background: red), ta tô màu chuyển từ màu này sang màu khác (Ví dụ: Từ xanh sang tím).

  • Ví dụ:

    CSS
     
    .nen-dep {
    background: linear-gradient(to right, blue, purple);
}

    • Ý nghĩa: Tạo cảm giác hiện đại, sang trọng cho thanh Menu hoặc nút bấm.

5.2. Tương tác người dùng (Pseudo-class :hover)

  • Khái niệm: CSS cung cấp trạng thái :hover, nghĩa là “Khi con chuột đang đè lên phần tử đó”.

  • Ví dụ thực tế: Khi lướt web, bạn thấy nút bấm đổi màu khi đưa chuột vào, đó chính là :hover.

  • Code mẫu:

    CSS
     
    /* Trạng thái bình thường */
button {
    background-color: blue;
    color: white;
}

/* Trạng thái khi di chuột vào */
button:hover {
    background-color: navy; /* Đổi sang xanh đậm */
    cursor: pointer;        /* Con trỏ chuột biến thành bàn tay */
}

5.3. Hiệu ứng chuyển động (Transition & Transform)

5.3.1. Biến đổi hình học (transform)

  • Chức năng: Thay đổi hình dạng, vị trí của vật thể mà không ảnh hưởng đến bố cục xung quanh.

  • Các lệnh phổ biến:

    • transform: scale(1.2); -> Phóng to lên 1.2 lần (120%).

    • transform: rotate(45deg); -> Xoay 45 độ.

    • transform: translateX(20px); -> Dịch chuyển sang phải 20px.

5.3.2. Hiệu ứng chuyển tiếp (transition) – Quan trọng nhất

  • Vấn đề: Nếu chỉ dùng :hover đổi màu, màu sắc sẽ thay đổi “Bụp” một cái ngay lập tức (rất giật cục).

  • Giải pháp: transition giúp sự thay đổi diễn ra từ từ trong một khoảng thời gian.

  • Ví dụ so sánh:

    • Không có transition: Đang đứng -> Dịch chuyển tức thời đến đích (Giật).

    • Có transition: Đang đứng -> Đi bộ từ từ đến đích (Mượt).

  • Code mẫu:

    CSS
     
    .nut-bam {
    background: blue;
    /* Quan trọng: Mọi sự thay đổi sẽ diễn ra trong 0.5 giây */
    transition: all 0.5s; 
}

.nut-bam:hover {
    background: red;     /* Màu chuyển từ Xanh -> Đỏ trong 0.5s */
    transform: scale(1.1); /* Phóng to từ từ trong 0.5s */
}

Bài tập 5.1: Thiết kế Nút bấm (Button) chuyên nghiệp

Hình mẫu bài tập

  • Yêu cầu: Tạo ra 3 nút bấm với 3 hiệu ứng khác nhau khi di chuột vào.

    1. Nút 1 (Cơ bản): Màu nền chuyển từ Cam sang Đỏ.

    2. Nút 2 (Phóng to): Nút to lên 1.2 lần (scale).

    3. Nút 3 (Xoay): Nút xoay 1 vòng 360 độ (rotate).

  • Gợi ý: Nhớ luôn thêm dòng transition: 0.5s; vào CSS của nút bấm gốc.

Gợi ý làm bài:
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Bài tập 5.1 - Button Hiệu ứng</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      gap: 20px;
    }

    .btn {
      padding: 12px 24px;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.5s;
      color: #fff;
    }

    /* Nút 1: Cơ bản - đổi màu nền */
    .btn-basic {
      background: orange;
    }
    .btn-basic:hover {
      background: red;
    }

    /* Nút 2: Phóng to */
    .btn-scale {
      background: #3498db;
    }
    .btn-scale:hover {
      transform: scale(1.2);
      background: #2980b9;
    }

    /* Nút 3: Xoay */
    .btn-rotate {
      background: #2ecc71;
    }
    .btn-rotate:hover {
      transform: rotate(360deg);
      background: #27ae60;
    }
  </style>
</head>
<body>
  <button class="btn btn-basic">Nút 1 - Cơ bản</button>
  <button class="btn btn-scale">Nút 2 - Phóng to</button>
  <button class="btn btn-rotate">Nút 3 - Xoay</button>
</body>
</html>

Giải thích:

  • .btn: lớp chung cho tất cả nút, có transition: 0.5s; để tạo hiệu ứng mượt.

  • Nút 1: đổi màu nền từ Cam → Đỏ khi hover.

  • Nút 2: dùng transform: scale(1.2); để phóng to 1.2 lần.

  • Nút 3: dùng transform: rotate(360deg); để xoay tròn một vòng.

Bài tập 5.2: Thiết kế Thẻ sản phẩm (Product Card)

  • Mục tiêu: Kết hợp border-radius, box-shadow và hover.

  • Yêu cầu:

    • Tạo một khối div chứa ảnh sản phẩm, tên và giá.

    • Bo tròn góc khối đó 10px.

    • Tạo bóng mờ nhẹ (box-shadow).

    • Hiệu ứng: Khi di chuột vào thẻ sản phẩm, thẻ đó sẽ “nổi” lên cao một chút (dùng transform: translateY(-10px)) và bóng đổ đậm hơn.

Gợi ý làm bài:

File index.html

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Trang thương mại điện tử</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="title">Cửa hàng trực tuyến</h1>
  <div class="container">
    <!-- 15 sản phẩm -->
    <div class="product">
      <img src="IMAGEs/A1.jpg" alt="Sản phẩm A1">
      <h3>Sản phẩm A1</h3>
      <p class="price">500.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A2.jpg" alt="Sản phẩm A2">
      <h3>Sản phẩm A2</h3>
      <p class="price">600.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A3.jpg" alt="Sản phẩm A3">
      <h3>Sản phẩm A3</h3>
      <p class="price">700.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A4.jpg" alt="Sản phẩm A4">
      <h3>Sản phẩm A4</h3>
      <p class="price">800.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A5.jpg" alt="Sản phẩm A5">
      <h3>Sản phẩm A5</h3>
      <p class="price">900.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A6.jpg" alt="Sản phẩm A6">
      <h3>Sản phẩm A6</h3>
      <p class="price">1.000.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A7.jpg" alt="Sản phẩm A7">
      <h3>Sản phẩm A7</h3>
      <p class="price">1.100.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A8.jpg" alt="Sản phẩm A8">
      <h3>Sản phẩm A8</h3>
      <p class="price">1.200.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A9.jpg" alt="Sản phẩm A9">
      <h3>Sản phẩm A9</h3>
      <p class="price">1.300.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A10.jpg" alt="Sản phẩm A10">
      <h3>Sản phẩm A10</h3>
      <p class="price">1.400.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A11.jpg" alt="Sản phẩm A11">
      <h3>Sản phẩm A11</h3>
      <p class="price">1.500.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A12.jpg" alt="Sản phẩm A12">
      <h3>Sản phẩm A12</h3>
      <p class="price">1.600.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A13.jpg" alt="Sản phẩm A13">
      <h3>Sản phẩm A13</h3>
      <p class="price">1.700.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A14.jpg" alt="Sản phẩm A14">
      <h3>Sản phẩm A14</h3>
      <p class="price">1.800.000 VNĐ</p>
    </div>
    <div class="product">
      <img src="IMAGEs/A15.jpg" alt="Sản phẩm A15">
      <h3>Sản phẩm A15</h3>
      <p class="price">1.900.000 VNĐ</p>
    </div>
  </div>
</body>
</html>

File styles.css

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-align: center;
  padding: 15px;
  transition: 0.3s;
}

.product img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.product h3 {
  margin: 10px 0;
  font-size: 16px;
  color: #444;
}

.price {
  font-size: 15px;
  font-weight: bold;
  color: #e74c3c;
}

.product:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

Bài tập 5.3: Thiết kế trang web chuyên nghiệp về thương mại điện tử cho một lĩnh vực (Điện máy, thực phẩm, nội thất…)

Yêu cầu :

  • Trang web có một trang index.html làm trang chủ, trong trang web này có các nút bấm để điều hướng trang web. các nút có hiệu ứng giống bài 5.1.
  • Trang web có 4 trang html để giới thiệu sản phẩm
  • Hình ảnh được đặt tên A1, A2, A3…….
  • trang style.css riêng để định dạng chung cho các trang html

  • Trong mỗi trang html:

    • Tạo một khối div chứa ảnh sản phẩm, tên và giá.

    • Bo tròn góc khối đó 10px.

    • Tạo bóng mờ nhẹ (box-shadow).

    • Hiệu ứng: Khi di chuột vào thẻ sản phẩm, thẻ đó sẽ “nổi” lên cao một chút (dùng transform: translateY(-10px)) và bóng đổ đậm hơn.

Cây thư mục cho website thương mại điện tử

EcommerceSite/
│
├── index.html                # Trang chủ, có menu điều hướng
│
├── products/                 # Thư mục chứa các trang sản phẩm
│   ├── product1.html         # Trang giới thiệu sản phẩm 1
│   ├── product2.html         # Trang giới thiệu sản phẩm 2
│   ├── product3.html         # Trang giới thiệu sản phẩm 3
│   └── product4.html         # Trang giới thiệu sản phẩm 4
│
├── images/                   # Thư mục chứa hình ảnh sản phẩm
│   ├── A1.jpg
│   ├── A2.jpg
│   ├── A3.jpg
│   └── A4.jpg
│
├── css/                      # Thư mục chứa file CSS
│   └── style.css             # Định dạng giao diện, hiệu ứng hover
│
└── js/                       # Thư mục chứa file JavaScript (nếu cần)
    └── script.js             # Các hiệu ứng nút bấm giống bài 5.1

4. Câu hỏi ôn tập

  1. Câu hỏi: Làm thế nào để biến một thẻ div hình vuông thành hình tròn hoàn hảo?

    • Trả lời: Thiết lập thuộc tính border-radius: 50%; và đảm bảo chiều rộng bằng chiều cao.

  2. Câu hỏi: Thuộc tính transition có tác dụng gì? Nếu thiếu nó thì chuyện gì xảy ra?

    • Trả lời: transition tạo độ trễ và sự mượt mà cho quá trình thay đổi trạng thái. Nếu thiếu nó, mọi thay đổi (màu sắc, kích thước) sẽ diễn ra ngay lập tức (giật cục).

  3. Câu hỏi: transform: scale(1.5) nghĩa là gì?

    • Trả lời: Nghĩa là phóng to đối tượng lên 1.5 lần (150%) so với kích thước ban đầu.

  4. Câu hỏi: Tại sao nên dùng box-shadow thay vì vẽ viền đen đậm (border)?

    • Trả lời: box-shadow tạo cảm giác chiều sâu (3D), giúp giao diện trông hiện đại và tách biệt các lớp nội dung tốt hơn so với viền đen đơn điệu.