Bóng

Podcast CSS – 017: Bóng

Giả sử bạn được gửi một thiết kế để xây dựng và trong thiết kế đó có hình ảnh một chiếc áo thun được cắt xẻ và có bóng đổ. Nhà thiết kế cho bạn biết rằng hình ảnh sản phẩm là hình ảnh độ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ì một chiếc áo phông, hình ảnh có thể là tấm che, quần soóc hoặc bất kỳ mặt hàng nào khác. Bạn sẽ làm việc đó bằng CSS như thế nào?

CSS có thuộc tính box-shadow và text-shadow, nhưng hình ảnh không phải là văn bản, vì vậy, 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 phải xung quanh áo thun.

Thật may là bạn vẫn có một tuỳ chọn khác: bộ lọc drop-shadow(). Điều này giúp bạn làm được những gì nhà thiết kế yêu cầu. Có rất nhiều lựa chọn khi đề cập đến việc đổ 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

Thuộc tính box-shadow dùng để thêm bóng vào hộp của phần tử HTML. Cách 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ủa các giá trị cho box-shadow như sau:

1. Độ lệch theo chiều ngang: số dương sẽ đẩy số này ra từ bên trái và số âm sẽ đẩy số này ra từ bên phải.
2. Độ lệch dọc: số dương sẽ đẩy giá trị này xuống từ trên cùng, còn số âm sẽ đẩy giá trị này từ dưới lên.
3. Bán kính làm mờ: số lớn hơn tạo ra bóng bị mờ hơn, trong khi số nhỏ tạo ra bóng sắc nét hơn.
4. Bán kính trải rộng (không bắt buộc): số lớn hơn sẽ 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, khiến nó có kích thước bằng 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 giá trị này, màu văn bản đã tính toán sẽ được sử dụng.

Để đặt bóng đổ trong hộp, 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 tuỳ 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 để đạt được điều 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 hiệu ứng bóng đổ

Việc thêm border-radius vào hộp của bạn cũng sẽ ảnh hưởng đến hình dạng của bóng đổ. Đ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 hướng vào đó.

.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 chứa 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

Thuộc tính text-shadow rất giống với thuộc tính box-shadow. Thao tá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;
}

Giá trị của text-shadow giống với box-shadow và có 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, nó sẽ được cắt theo hình dạng hộp của bạn, nhưng text-shadow không có phần cắt. Tức là nếu văn bản hoàn toàn hoặc bán trong suốt, thì bạn có thể nhìn thấy bóng 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 số lượng bóng tuỳ 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 thực sự 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 được hiệu ứng bóng đổ sau mọi đường cong tiềm năng của hình ảnh, hãy sử dụng bộ lọc drop-shadow của CSS. Bóng này được áp dụng cho mặt nạ alpha, nhờ đó rất hữu ích trong việc thêm bóng vào hình ảnh cắt, như trong trường hợp ở 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 từ khoá inset và giá trị spread không được phép. Bạn có thể thêm bao 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 định vị.

Kiểm tra mức độ hiểu biết của bạn

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