Hiệu ứng đổ bóng trong CSS - CSS Shadow Effect

  • Thắng

    Tác giả

    Thắng

  • Ngày đăng

    1 thg 11, 2023

  • Số lượt xem

    395 lượt xem


Hiệu ứng bóng (shadow effect) trong CSS là một kỹ thuật để tạo ra bóng đổ xung quanh một phần tử trên trang web.

CSS Shadow Effects

 

Với CSS bạn có thể thêm các thuộc tính đổ bóng vào văn bản(text) và các thành phần(elements) trong trang web của bạn. Trong bài này chúng ta sẽ học về các thuộc tính:

   - text-shadow

   - box-shadow

Đầu tiên chúng ta sẽ tìm hiểu về các thuộc tính trong text-shadow.

Lưu ý: để thực hiện như các vị dụ minh họa dưới đây bạn cần tạo một file chứa đoạn mã HTML để hiển thị văn bản hoặc thẻ <h> để dễ nhìn thấy sự khác biệt và dễ hiểu hơn.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {    text-shadow: 2px 2px;  }
</style>
</head>
<body>  
<h1>Text-shadow effect!</h1>
</body>
</html>

 

 

CSS Text Shadow

 

Trong trường hợp chúng ta chỉ muốn thẻ h1 đổ bóng ngang 2px và dọc 2px, ví dụ:

h1 {
     text-shadow: 2px 2px;
}

 

Sau khi thêm thuộc tính vào thì thẻ h1 của chúng ta sẽ hiển thị như hình minh họa:

 

Tiếp theo, chúng ta có thể thêm màu vào bóng của thẻ h1 các bạn có thể thêm bất cứ màu nào có trong CSS. Ở ví dụ này chúng ta sẽ thêm màu đỏ:

h1 {
   text-shadow: 2px 2px red;
}

 

Sau khi thêm thuộc tính "red" thẻ h1 của chúng ta sẽ như hình minh họa dưới đây:

 

 

Và chúng ta cũng có thể thêm độ làm mờ(blur) vào bóng của thẻ h1 với độ làm mờ là 5px như ví dụ sau:

h1 {
   text-shadow: 2px 2px 5px red;
}

 

Thẻ h1 của chúng ta sẽ hiển thị như hình minh họa dưới đây:

 

 

Trường hợp chúng ta muốn có chữ màu sáng và đổ bóng màu tối, ví dụ sau đây chúng ta sẽ sửa thẻ h1 của chúng ta thành chữ trắng đổ bóng đen:

 

h1 {
   color: white;  
   text-shadow: 2px 2px 4px #000000;
}

 

Thẻ h1 của chúng ta sẽ hiển thị như hình:

 

 

 

Multiple Shadows

 

Nếu bạn muốn một text có thể đổ nhiều bóng với 2 màu khác nhau, bạn có thể thêm các thuộc tính đổ bóng khác nhau và tách nhau  bằng dấu ",". Ví dụ:

h1{  
     text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

 

Sau khi thêm các thuộc tính trên thẻ h1  của chúng ta sẽ hiển thị như hình:

 

Với CSS bạn cũng có thể vẽ viền(border) xung quanh text(không có bóng đổ). Ví dụ:

 

h1 {
   color: coral;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

 

Ở ví dụ trên chúng ta đã đổi màu chữ của thẻ h1 thành màu coral và vẽ border xung quanh text, kết quả sẽ hiển thị như hình:

 

 

 


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.