Bóng

The CSS Podcast – 017: Bóng

Giả sử bạn được gửi một thiết kế để tạo và trong thiết kế đó có hình ảnh một chiếc áo phông, được cắt ra, có bóng đổ. Nhà thiết kế cho bạn biết rằng hình ảnh sản phẩm là động và có thể được cập nhật thông qua hệ thống quản lý nội dung, vì vậy, bóng đổ cũng cần phải động. Thay vì áo thun, hình ảnh có thể là kính râm hoặc quần short hoặc bất kỳ mặt hàng nào khác. Bạn làm điều đó bằng CSS như thế nào?

CSS có các thuộc tính box-shadow và text-shadow, nhưng hình ảnh không phải là văn bản nên bạn không thể sử dụng text-shadow. Nếu bạn sử dụng box-shadow, bóng sẽ nằm trên hộp xung quanh, không nằm xung quanh áo thun.

May mắn là có một lựa chọn khác: bộ lọc drop-shadow(). Điều này giúp bạn làm đúng những gì nhà thiết kế yêu cầu. Có rất nhiều lựa chọn khi nói đến bóng trong CSS, mỗi lựa chọn được thiết kế cho một trường hợp sử dụng khác nhau.

Bóng hộp

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

Thuộc tính box-shadow dùng để thêm bóng vào hộp của một phần tử HTML. Phương thức này hoạt động trên các phần tử khối và phần tử cùng dòng.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

Thứ tự các giá trị cho box-shadow như sau:

  1. Độ dời ngang: số dương đẩy nó ra từ bên trái và số âm sẽ đẩy nó ra từ bên phải.
  2. Độ dời theo chiều dọc: số dương đẩy xuống từ trên cùng và số âm đẩy lên từ dưới cùng.
  3. Blur radius (Bán kính làm mờ): số lớn hơn tạo ra bóng mờ hơn, trong khi số nhỏ tạo ra bóng sắc nét hơn.
  4. Bán kính lan toả (không bắt buộc): số lớn hơn làm tăng kích thước của bóng và số nhỏ hơn làm giảm kích thước của bóng, làm cho bóng có cùng kích thước với bán kính làm mờ nếu được đặt thành 0.
  5. Màu: Mọi giá trị màu hợp lệ. Nếu bạn không xác định thuộc tính này, thì màu văn bản được tính toán sẽ được sử dụng.

Để tạo bóng hộp là bóng bên trong, thay vì bóng bên ngoài mặc định, hãy thêm từ khoá inset trước các thuộc tính khác.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

Nhiều bóng

Bạn có thể thêm bao nhiêu bóng tùy thích bằng box-shadow. Thêm một tập hợp các tập hợp giá trị được phân tách bằng dấu phẩy để thực hiện việc này:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

Các thuộc tính ảnh hưởng đến box-shadow

Việc thêm border-radius vào hộp cũng sẽ ảnh hưởng đến hình dạng của bóng hộp. Điều này là do CSS đang tạo bóng dựa trên hình dạng của hộp như thể ánh sáng đang chiếu vào hộp.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

Nếu hộp có box-shadow nằm trong vùng chứa có overflow: hidden, thì bóng sẽ không thoát ra khỏi vùng tràn đó.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

Độ bóng văn bản

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

Thuộc tính text-shadow rất giống với thuộc tính box-shadow. Phương thức này chỉ hoạt động trên các nút văn bản.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

Các giá trị của text-shadow giống với box-shadow và theo cùng thứ tự. Điểm khác biệt duy nhất là text-shadow không có giá trị spread và không có từ khoá inset.

Khi bạn thêm box-shadow, thành phần này sẽ được cắt theo hình dạng của hộp, nhưng text-shadow không có phần cắt. Điều này có nghĩa là nếu văn bản của bạn hoàn toàn hoặc bán trong suốt, bóng sẽ hiển thị qua văn bản đó.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

Nhiều bóng

Bạn có thể thêm bao nhiêu bóng tùy thích bằng text-shadow, giống như với box-shadow. Thêm một tập hợp các tập hợp giá trị được phân tách bằng dấu phẩy, bạn có thể tạo một số hiệu ứng văn bản rất thú vị, chẳng hạn như văn bản 3D.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

Bóng đổ

Để tạo bóng đổ theo mọi đường cong tiềm ẩn của hình ảnh, hãy sử dụng bộ lọc drop-shadow CSS. Bóng này được áp dụng cho một mặt nạ alpha, rất hữu ích khi thêm bóng vào hình ảnh được cắt, như trong trường hợp trong phần giới thiệu của mô-đun này.

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

Bộ lọc drop-shadow có các giá trị giống với box-shadow nhưng không cho phép từ khoá inset và giá trị spread. Bạn có thể thêm nhiều bóng đổ tuỳ thích bằng cách thêm nhiều thực thể của giá trị drop-shadow vào thuộc tính filter. Mỗi bóng sẽ sử dụng bóng cuối cùng làm điểm tham chiếu vị trí.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về bóng

Giá trị bóng nào dưới đây là duy nhất cho box-shadow?

Độ lệch ngang
Hãy thử lại!
Độ lệch dọc
Hãy thử lại!
Bán kính làm mờ
Hãy thử lại!
Bán kính lan toả
🎉
Màu
Hãy thử lại!
inset
Hãy thử lại! inset là một từ khoá cũng chỉ dành riêng cho box-shadow.

Mỗi phần tử chỉ được phép có tối đa 13 bóng hộp cùng một lúc.

Đúng
Không có giới hạn chính thức.
Sai
Thêm nhiều bóng hộp tuỳ ý.