CSS Nâng Cao – Responsive, Background, Hiệu Ứng và Animation

Đây là nhóm kỹ thuật thường dùng trong giao diện thực tế, giúp website tương thích đa nền tảng, tăng tính thẩm mỹ và tạo trải nghiệm sinh động.

1. Nội dung chính

• Responsive Design – Media Queries
• Responsive Units & Breakpoints
• Background: image, size, repeat, position
• Border, Border-radius, Box-shadow
• Opacity & Filter
• Transition, Transform, Animation

2. Ví dụ

/* Media Queries */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

/* Background */
.hero {
  background-image: url('banner.jpg');
  background-size: cover;
  background-position: center;
}

/* Border & Shadow */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Opacity & Filter */
.img {
  opacity: 0.8;
  filter: grayscale(50%);
}

/* Transition & Transform */
.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.05);
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-box {
  animation: fadeIn 1s ease-in-out;
}

Ví dụ Responsive Navigation

<nav class="responsive-nav">
  <div class="brand">Brand</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.responsive-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

/* Responsive: chuyển sang dạng column trên mobile */
@media (max-width: 768px) {
  .responsive-nav {
    flex-direction: column;
    padding: 1rem;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
}

Ví dụ Card với Hover Effects

<div class="card">
  <img src="image.jpg" alt="Card image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
</div>

.card {
  width: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.1);
}

.card-content {
  padding: 1.5rem;
  background: white;
}

Ví dụ Animation Loading Spinner

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

3. Kiến thức trọng tâm

💡 GHI NHỚ: Media queries giúp điều chỉnh bố cục theo độ rộng màn hình, sử dụng các breakpoint chuẩn (576px, 768px, 992px, 1200px…)

💡 GHI NHỚ: Background-size: cover giúp hình nền đầy màn hình mà không méo; contain giữ tỉ lệ

💡 GHI NHỚ: Box-shadow làm tăng chiều sâu, border-radius tạo sự mềm mại

💡 GHI NHỚ: Transition tạo hiệu ứng mượt, transform thay đổi kích thước, xoay, dịch chuyển

💡 GHI NHỚ: Animation dùng keyframes giúp tạo chuyển động phức tạp hơn transition

4. Bài tập nhanh

1. Tạo một thẻ div có background-fullwidth, thay đổi bố cục khi màn hình nhỏ hơn 768px:

<div class="hero-section">
  <h1>Welcome to Our Site</h1>
  <p>This is a responsive hero section.</p>
</div>

.hero-section {
  background-image: url('hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

@media (max-width: 768px) {
  .hero-section {
    height: 70vh;
    padding: 2rem;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .hero-section p {
    font-size: 1rem;
  }
}

2. Tạo thẻ card có border-radius, box-shadow và thêm hiệu ứng hover bằng transition + transform:

<div class="feature-card">
  <div class="card-icon">🚀</div>
  <h3>Fast Performance</h3>
  <p>Lightning fast loading speeds.</p>
</div>

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.feature-card:hover .card-icon {
  transform: scale(1.2) rotate(10deg);
}

3. Tạo animation fade-in cho một đoạn text khi tải trang:

<h2 class="fade-in-text">Welcome to our amazing website!</h2>

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-text {
  animation: fadeInUp 0.8s ease-out;
  animation-fill-mode: both;
  animation-delay: 0.2s;
}

5. Kết luận

Nhóm kỹ thuật trong bài 5 giúp bạn xây dựng giao diện hiện đại, giàu tính tương tác và đáp ứng đa thiết bị. Đây là bước quan trọng để chuẩn hóa UI trước khi đi vào tổ chức CSS chuyên nghiệp ở bài tiếp theo.