Xin chào các bạn设计师 web đang trên đà phát triển! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những thuộc tính CSS yêu thích của tôi: box-shadow. Nó giống như việc赋予 web elements của bạn sức mạnh ma thuật để tạo ra những bóng đổ! Hãy cùng nhau bắt đầu cuộc phiêu lưu đầy bóng tối này.

CSS - Box Shadow

Box Shadow là gì?

Trước khi chúng ta bắt đầu, hãy tưởng tượng bạn đang cầm một mảnh giấy. Bây giờ, nâng nó lên khỏi bàn một chút. Thấy khu vực tối dưới đó không? Đó chính là điều mà box-shadow trong CSS làm - nó tạo ảo giác rằng phần tử của bạn đang nổi lên trên trang.

Box shadow là một thuộc tính CSS cho phép bạn thêm hiệu ứng bóng đổ xung quanh khung của một phần tử. Đây là một cách tuyệt vời để thêm độ sâu, chiều sâu và điểm nhấn vào thiết kế web của bạn.

Cấu tạo của Box Shadow

Hãy phân tích thuộc tính box-shadow. Nó có thể trông đáng sợ ban đầu, nhưng tôi đảm bảo rằng nó thân thiện hơn một chú golden retriever khi bạn đã quen thuộc với nó!

Cú pháp

box-shadow: h-offset v-offset blur spread color;

Đừng lo lắng nếu điều này trông như một thứ tiếng lóng ngay bây giờ. Chúng ta sẽ khám phá từng phần chi tiết.

Các giá trị khả thi

Dưới đây là bảng các giá trị khả thi cho box-shadow:

Giá trị	Mô tả	Bắt buộc?
h-offset	Khoảng cách theo phương nằm ngang của bóng	Có
v-offset	Khoảng cách theo phương dọc của bóng	Có
blur	Bán kính mờ	Tùy chọn
spread	Bán kính lan rộng	Tùy chọn
color	Màu sắc của bóng	Tùy chọn
inset	Làm cho bóng nằm trong khung	Tùy chọn

Bây giờ, hãy xem xét từng phần của chúng.

h-offset và v-offset

Những giá trị này xác định nơi bóng đổ sẽ rơi. Hãy tưởng tượng như bạn đang chiếu đèn pin vào phần tử của mình:

h-offset dương dịch chuyển bóng sang phải
h-offset âm dịch chuyển bóng sang trái
v-offset dương dịch chuyển bóng xuống dưới
v-offset âm dịch chuyển bóng lên trên

Hãy xem một ví dụ:

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: 10px 10px;
}

Điều này tạo ra một bóng 10 pixel sang phải và 10 pixel xuống dưới từ hộp của chúng ta.

blur

Giá trị mờ làm mềm mép của bóng. Con số càng cao, bóng càng mờ. Dưới đây là cách chúng ta có thể thêm nó:

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: 10px 10px 5px;
}

Điều này thêm một bóng mờ 5 pixel vào bóng của chúng ta.

spread

Giá trị lan rộng xác định mức độ mở rộng của bóng. Giá trị dương làm cho bóng lớn hơn, trong khi giá trị âm làm cho nó nhỏ hơn. Hãy thêm nó vào ví dụ của chúng ta:

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: 10px 10px 5px 5px;
}

Điều này mở rộng bóng của chúng ta ra 5 pixel ở tất cả các hướng.

color

Cuối cùng, chúng ta có thể đặt màu sắc của bóng. Nếu không được chỉ định, nó mặc định là màu sắc hiện tại của phần tử. Hãy làm cho bóng của chúng ta có màu đỏ:

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: 10px 10px 5px 5px #e74c3c;
}

Áp dụng cho

Bóng đổ có thể được áp dụng cho hầu hết các phần tử HTML, nhưng nó thường được sử dụng trên các div, hình ảnh và nút để tạo ra cảm giác độ sâu hoặc nổi bật các phần tử quan trọng.

Cú pháp DOM

Nếu bạn đang làm việc với JavaScript, bạn có thể manipulates box-shadow bằng DOM. Dưới đây là cách:

document.getElementById("myElement").style.boxShadow = "10px 10px 5px 5px #e74c3c";

Điều này đặt thuộc tính box-shadow của phần tử có ID "myElement".

CSS box-shadow - Giá trị `inset`

Nhớ khi tôi đề cập đến giá trị tùy chọn 'inset' không? Đã đến lúc hé lộ sức mạnh bí mật của nó! Từ khóa 'inset' thay đổi bóng từ ngoài (outset) thành bóng trong. Nó giống như phần tử của bạn được刻 vào trang thay vì nổi lên trên nó.

Dưới đây là cách sử dụng nó:

.inset-box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: inset 5px 5px 5px 0px #2980b9;
}

Điều này tạo ra một bóng trong 5 pixel sang phải và xuống dưới, với một bóng mờ 5 pixel.

Nhiều bóng

Đây là một sự thật thú vị: bạn có thể áp dụng nhiều bóng cho một phần tử! Chỉ cần tách mỗi bóng bằng dấu phẩy. Ví dụ:

.multi-shadow {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    box-shadow: 
        5px 5px 10px 0px #2980b9,
        -5px -5px 10px 0px #e74c3c,
        inset 5px 5px 10px 0px #2ecc71;
}

Điều này tạo ra một phần tử có bóng ngoài ở góc dưới bên phải, một bóng ở góc trên bên trái, và một bóng trong!

Kết luận

Và thế là bạn đã mở khóa sức mạnh của box-shadow. Nhớ rằng, giống như bất kỳ siêu năng lực nào, hãy sử dụng nó một cách có trách nhiệm. Một bóng mờ tinh tế có thể thêm sự tinh tế vào thiết kế của bạn, nhưng quá nhiều bóng có thể làm cho trang của bạn trông như thể bị cuốn vào một cơn bão bóng!

Thực hành với các giá trị khác nhau, kết hợp chúng một cách sáng tạo, và quan trọng nhất, hãy vui vẻ! Trước khi bạn biết, bạn sẽ trở thành một Shadowmaster của thiết kế web. Đến gặp lại các bạn, tiếp tục lập trình và ở lại trong bóng tối!

Credits: Image by storyset

Hướng Dẫn Trước:

CSS - Gradient

Hướng Dẫn Tiếp Theo:

CSS - Ngắt Trang trí Hộp