Bài 15: Background, Shadow và Opacity

Để trang web trông thực sự chuyên nghiệp, bạn cần nhiều hơn chỉ text và borders. Background, shadow, và opacity là những công cụ tạo độ sâu, kết cấu, và hiệu ứng 3D cho trang web. Kết hợp chúng một cách khéo léo sẽ làm trang web trông sang trọng và hiện đại.

Bài này sẽ dạy bạn cách tạo những hiệu ứng này để làm trang web của bạn trở nên đẹp mắt hơn.

Background – Hình nền

Background là phần nền của một phần tử. Nó có thể là màu sắc, hình ảnh, hoặc gradient.

Background-color – Màu nền

/* Màu nền đơn giản */
.box {
  background-color: #f0f0f0;
}

/* RGBA: Màu với độ trong suốt */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);  /* Đen 50% trong suốt */
}

/* Transparent */
.transparent {
  background-color: transparent;
}

Background-image – Hình nền

/* Hình ảnh từ URL */
.header {
  background-image: url('banner.jpg');
  height: 300px;
}

/* Hình ảnh từ thư mục */
.section {
  background-image: url('../images/pattern.png');
}

/* Gradient (sẽ học chi tiết dưới) */
.gradient {
  background-image: linear-gradient(to right, blue, red);
}

Background-size – Kích thước hình nền

/* Cover: phủ kín (thường dùng cho hero image) */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
}

/* Contain: vừa vặn */
.logo {
  background-image: url('logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 100px;
}

Background-position – Vị trí hình nền

/* Vị trí theo từ khóa */
.box {
  background-image: url('bg.jpg');
  background-position: center;       /* center center */
  background-position: top left;     /* Góc trên-trái */
  background-position: bottom right; /* Góc dưới-phải */
}

/* Vị trí theo tọa độ */
.box {
  background-position: 50px 100px;  /* 50px từ trái, 100px từ trên */
}

/* Vị trí theo phần trăm */
.box {
  background-position: 50% 50%;     /* Giữa */
}

Background-repeat – Lặp lại hình nền

/* Lặp lại cả hai chiều (mặc định) */
.pattern {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

/* Lặp chỉ theo chiều X */
.stripe {
  background-repeat: repeat-x;
}

/* Lặp chỉ theo chiều Y */
.stripe-vertical {
  background-repeat: repeat-y;
}

/* Không lặp lại */
.single {
  background-repeat: no-repeat;
}

Background shorthand

/* Cách dài */
.box {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shorthand */
.box {
  background: url('bg.jpg') center / cover no-repeat;
}

Gradient – Chuyển màu đặc sắc

Gradient là chuyển màu từ từ giữa hai hay nhiều màu. Tạo hiệu ứng đẹp mắt mà không cần hình ảnh.

Linear Gradient – Chuyển màu thẳng

/* Gradient từ trái sang phải */
.gradient {
  background: linear-gradient(to right, blue, red);
}

/* Gradient từ trên xuống dưới (mặc định) */
.gradient {
  background: linear-gradient(to bottom, blue, red);
}

/* Gradient theo góc (45 độ) */
.gradient {
  background: linear-gradient(45deg, blue, red);
}

/* Gradient với 3+ màu */
.gradient {
  background: linear-gradient(to right, blue, purple, red);
}

/* Gradient với color stops (vị trí màu) */
.gradient {
  background: linear-gradient(
    to right,
    blue 0%,      /* Màu xanh từ đầu */
    purple 50%,   /* Màu tím ở giữa */
    red 100%      /* Màu đỏ ở cuối */
  );
}

Radial Gradient – Chuyển màu từ tâm

/* Gradient từ tâm ra ngoài */
.radial {
  background: radial-gradient(circle, blue, red);
}

/* Gradient hình elipse */
.ellipse {
  background: radial-gradient(ellipse, blue, red);
}

/* Gradient với vị trí tâm */
.custom {
  background: radial-gradient(circle at center, blue 0%, red 100%);
}

/* Gradient tại góc */
.corner {
  background: radial-gradient(circle at top left, blue, red);
}

Box-shadow – Bóng của phần tử

box-shadow tạo bóng xung quanh phần tử, giúp tạo hiệu ứng độ sâu 3D.

/* Bóng đơn giản */
.box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* offset-x | offset-y | blur-radius | color */
}

/* Bóng nhiều lớp (cộng dồn) */
.card {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Bóng inset (bóng bên trong) */
.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Bóng hồng (sáng) */
.glow {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

Box-shadow với hover effect

/* Card bình thường */
.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* Card khi hover (bóng tăng) */
.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Text-shadow – Bóng chữ

text-shadow tạo bóng cho chữ.

/* Bóng chữ đơn giản */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Bóng chữ multiple */
.text {
  text-shadow: 
    1px 1px 2px #000,
    2px 2px 4px #333;
}

/* Bóng chữ sáng (glow effect) */
.glow {
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Bóng chữ đặc biệt (3D effect) */
.3d-text {
  text-shadow: 
    -2px -2px 0px #333,
    -4px -4px 0px #666,
    -6px -6px 12px rgba(0, 0, 0, 0.3);
}

Opacity – Độ trong suốt

opacity xác định độ trong suốt của toàn bộ phần tử (từ 0 = hoàn toàn trong suốt đến 1 = không trong suốt).

/* Hoàn toàn không trong suốt (bình thường) */
.opaque {
  opacity: 1;
}

/* Bán trong suốt (50%) */
.semi-transparent {
  opacity: 0.5;
}

/* Gần như trong suốt */
.transparent {
  opacity: 0.2;
}

/* Hoàn toàn trong suốt (ẩn) */
.hidden {
  opacity: 0;
  /* Nhưng vẫn chiếm không gian (khác display: none) */
}

💡 Mẹo: opacity vs rgba

• opacity: 0.5; làm trong suốt cả phần tử lẫn con em (cả chữ, ảnh…)
• background-color: rgba(0, 0, 0, 0.5); chỉ làm trong suốt background, text vẫn đen
• Dùng rgba cho background/color, opacity cho effect hover/fade

/* ❌ SAI: opacity làm tất cả trong suốt */
.overlay {
  background-color: black;
  opacity: 0.5;
  /* Chữ cũng trở nên bán trong suốt */
}

/* ✅ ĐÚNG: rgba chỉ nền */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  /* Chữ vẫn đen 100% */
}

Ví dụ hoàn chỉnh – Card với background, shadow, opacity

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background, Shadow, Opacity Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Hero section với gradient -->
  <section class="hero">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>Chào mừng bạn</h1>
      <p>Khám phá những hiệu ứng CSS tuyệt vời</p>
    </div>
  </section>

  <!-- Cards container -->
  <div class="container">
    <!-- Card 1: Box shadow -->
    <div class="card">
      <div class="card-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
      <div class="card-content">
        <h3>💎 Shadow Effect</h3>
        <p>Bóng tạo độ sâu và sự nổi bật cho phần tử.</p>
      </div>
    </div>

    <!-- Card 2: Gradient -->
    <div class="card">
      <div class="card-image" style="background: linear-gradient(to right, #f093fb 0%, #f5576c 100%);"></div>
      <div class="card-content">
        <h3>🌈 Gradient Magic</h3>
        <p>Gradient tạo hiệu ứng chuyển màu đẹp mắt.</p>
      </div>
    </div>

    <!-- Card 3: Opacity -->
    <div class="card">
      <div class="card-image" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
      <div class="card-content">
        <h3>✨ Opacity</h3>
        <p>Độ trong suốt tạo hiệu ứng layering đẹp.</p>
      </div>
    </div>
  </div>

  <!-- Text shadow demo -->
  <section class="text-demo">
    <h2 class="glow-text">Text Shadow Magic</h2>
    <p>Bóng chữ tạo hiệu ứng 3D và glow effect</p>
  </section>

  <!-- Background demo -->
  <section class="background-demo">
    <h2>Background Demo</h2>
    <div class="bg-patterns">
      <div class="pattern-1">Pattern 1</div>
      <div class="pattern-2">Pattern 2</div>
      <div class="pattern-3">Pattern 3</div>
    </div>
  </section>

</body>
</html>

/* FILE: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* ========== HERO SECTION ========== */

.hero {
  position: relative;
  height: 500px;
  background-image: url('https://via.placeholder.com/1920x500');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overlay với rgba */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);  /* Đen 40% trong suốt */
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);  /* Bóng chữ */
}

.hero p {
  font-size: 20px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* ========== CARDS ========== */

.container {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* Box shadow */
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);  /* Bóng tăng khi hover */
  transform: translateY(-5px);
}

.card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}

.card-content {
  padding: 25px;
}

.card-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.card-content p {
  color: #666;
  line-height: 1.6;
}

/* ========== TEXT SHADOW DEMO ========== */

.text-demo {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 20px;
  text-align: center;
}

.glow-text {
  font-size: 48px;
  color: white;
  margin-bottom: 20px;
  text-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),  /* Glow effect */
    2px 2px 8px rgba(0, 0, 0, 0.3);     /* Bóng */
}

.text-demo p {
  color: white;
  font-size: 18px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

/* ========== BACKGROUND DEMO ========== */

.background-demo {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.background-demo h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
  color: #2c3e50;
}

.bg-patterns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Pattern 1: Solid color + gradient */
.pattern-1 {
  height: 200px;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Pattern 2: Radial gradient */
.pattern-2 {
  height: 200px;
  background: radial-gradient(circle at center, #f093fb 0%, #f5576c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Pattern 3: Multiple gradients */
.pattern-3 {
  height: 200px;
  background: 
    linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%),
    linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  background-color: #4facfe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }

  .glow-text {
    font-size: 32px;
  }

  .container {
    gap: 20px;
  }
}

Các hiệu ứng background phổ biến

/* 1. Gradient từ transparent đến màu */
.gradient-transparent {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* 2. Multiple gradients (stripes) */
.stripes {
  background: linear-gradient(
    90deg,
    #f093fb 0%,
    #f093fb 25%,
    #f5576c 25%,
    #f5576c 50%,
    #4facfe 50%,
    #4facfe 75%,
    #00f2fe 75%,
    #00f2fe 100%
  );
  background-size: 40px;
}

/* 3. Checkerboard pattern */
.checkerboard {
  background-image: 
    linear-gradient(45deg, #fff 25%, transparent 25%),
    linear-gradient(-45deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fff 75%),
    linear-gradient(-45deg, transparent 75%, #fff 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  background-color: #eee;
}

/* 4. Overlay trên image */
.overlay-image {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('image.jpg');
  background-size: cover;
  background-position: center;
}

Tóm tắt

• ✅ Background-color: Màu nền
• ✅ Background-image: Hình nền (url, gradient)
• ✅ Background-size: Kích thước (cover, contain, px)
• ✅ Background-position: Vị trí (center, top, left…)
• ✅ Background-repeat: Lặp lại (repeat, repeat-x, no-repeat)
• ✅ Linear-gradient: Chuyển màu thẳng
• ✅ Radial-gradient: Chuyển màu từ tâm
• ✅ Box-shadow: Bóng phần tử
• ✅ Text-shadow: Bóng chữ
• ✅ Opacity: Độ trong suốt (0-1)
• ✅ RGBA: Màu với alpha (độ trong suốt)
• ✅ Shorthand background: Kết hợp tất cả tính chất

🎯 Bài tập thực hành

Bài tập 1: Tạo hero section với gradient + overlay:

• Background: linear-gradient (2 màu tùy chọn)
• Overlay: rgba(0, 0, 0, 0.4) trên gradient
• Text: white, text-shadow 2px 2px 8px
• Responsive height (500px desktop, 300px mobile)
• Centered h1 + p

Bài tập 2: Tạo card grid với box-shadow hover effect:

• 3 cards tối thiểu
• Card image: gradient background (mỗi card khác màu)
• Normal state: box-shadow 0 4px 12px
• Hover: box-shadow 0 12px 24px, translateY(-5px)
• Transition: 0.3s ease
• Card-content: padding 25px, h3 + p

Bài tập 3: Tạo background pattern library:

• 5-6 background patterns khác nhau (gradient, striped, checkerboard…)
• Mỗi pattern: div 200px × 200px
• Display: grid, gap 20px
• Mỗi pattern có label/title
• Box-shadow để nổi bật
• Hover effect: opacity, scale

Chúc bạn thành công! 🚀