Bóng

Podcast CSS – 017: Shadows

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

CSS có box-shadow và Thuộc tính 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 dùng box-shadow, bóng sẽ nằm trên hộp xung quanh, không phải xung quanh áo phông.

May mắn thay, còn có một lựa chọn khác: Bộ lọc drop-shadow(). Nhờ đó, bạn có thể làm được những yêu cầu của nhà thiết kế. Có rất nhiều lựa chọn về bóng trong CSS, mỗi loại được thiết kế cho một trường hợp sử dụng khác nhau.

Bóng hộp

Hỗ trợ trình duyệt

• 10
• 12
• 4
• 5,1

Nguồn

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

1. Độ lệch ngang: số dương đẩy từ bên trái ra, còn số âm sẽ đẩy từ bên phải ra.
2. Độ lệch theo chiều dọc: số dương sẽ đẩy quảng cáo từ trên xuống và số âm sẽ đẩy từ dưới lên.
3. Bán kính làm mờ: số lớn hơn thì tạo ra bóng mờ hơn, trong khi một 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 thì giảm độ đổ bóng, làm cho nó có cùng kích thước với bán kính làm mờ nếu bạn đặt giá trị này thành 0.
5. Màu: Bất kỳ giá trị màu hợp lệ nào. Nếu giá trị này không được xác định, màu văn bản đã tính sẽ được sử dụng.

Để tạo bóng hộp làm bóng bên trong, thay vì bóng ngoài mặc định, 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ũng sẽ ảnh hưởng đến hình dạng của bóng hộp. Điều này là do CSS 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 đó.

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

Nếu hộp của bạn có box-shadow nằm trong vùng chứa có overflow: hidden, bóng cũng sẽ không vượt ra khỏi phần 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

Hỗ trợ trình duyệt

• 2
• 12
• 3,5
• 1,1

Nguồn

Thuộc tính text-shadow rất giống với thuộc tính box-shadow. Tính năng 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, mã này sẽ được cắt theo hình dạng hộp của bạn, nhưng text-shadow không có đoạn video. Đ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 có thể nhìn thấy được qua đó.

.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 tuỳ thích bằng text-shadow, tương tự 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, và bạn có thể tạo một số hiệu ứng văn bản vô cùng thú vị 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 đổ theo mọi đường cong tiềm năng 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 nạ alpha, điều này rất hữu ích trong việc thêm bóng vào hình ảnh cắt bỏ, 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%))
}

Từ khoá quan trọng: Chúng tôi đề cập đến các bộ lọc CSS trong một mô-đun khác, nhưng tóm lại, bộ lọc cho phép bạn áp dụng nhiều hiệu ứng đồ hoạ cho các pixel của một phần tử.

Bộ lọc drop-shadow có cùng giá trị với box-shadow nhưng không được phép sử dụng từ khoá inset và giá trị spread. Bạn có thể thêm bao nhiêu bóng tuỳ thích, bằng cách thêm nhiều phiên bản 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 kiến thức

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

Giá trị bóng nào dưới đây là duy nhất của 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 trải rộng

🎉

Màu

Hãy thử lại!

inset

Hãy thử lại! inset là một từ khoá và cũng là duy nhất đối với box-shadow.

Chỉ cho phép 13 bóng hộp trên một phần tử 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ỳ ý.