Kết nối

Hiệu ứng tạo bóng vùng giao diện box-shadow trong CSS

68.309 lượt xem 
 Cập nhật lần cuối: 02/10/2023 lúc 09:06:16
Thể loại: Thiết kế Web 

Khi thiết kế giao diện website, bạn có thể dùng thuộc tính box-shadow cho vùng giao diện nào đó để tăng hiệu ứng nhìn trực quan và thẩm mỹ cho trang. Thuộc tính CSS này đều được hỗ trợ ở tất cả trình duyệt Web phiên bản mới nhất, vì vậy bạn cứ yên tâm sử dụng.

Thuộc tính box-shadow

Thuộc tính này dùng để tạo bóng mờ cho một vùng giao diện hay phần tử HTML (thường dạng khối – block). Cú pháp:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Trong đó tham số none là không tạo bóng, h-offset và v-offset là vị trí bóng theo tọa độ ngang/dọc. Tham số blur và spread là hai số tùy chọn dùng làm mờ bóng và tăng giảm kích thước bóng. Tham số color là màu của bóng, còn inset là tạo bóng bên trong, thay vì bên ngoài vùng giao diện. Tham số initial là thiết lập giá trị bóng mặc định, còn inherit là kế thừa các CSS của phần tử cha.

Tạo bóng với tham số h-offset, v-offset, blur và color

Ở ví dụ này, chúng ta sẽ tạo bóng mờ và với màu sắc của bóng cũng như vị trí xuất hiện của bóng.

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 1px 1px 1px #AAA;
}

#div2 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 5px 5px 5px yellow;
}

</style>
</head>
<body>

<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.com</a></h1>
<h2>box-shadow: 1px 1px 1px #AAA: --- dammio.com</h2>
<div id="div1">
  <p>Tạo bóng cho vùng div với h-offser = 1px, v-offset = 1px và độ blur = 1px.</p>
</div>

<h2>box-shadow: 5px 5px 5px yellow: --- dammio.com</h2>
<div id="div2">
  <p>Tạo bóng cho vùng div với h-offser = 5px, v-offset = 5px và độ blur = 10px, màu bóng là màu vàng.</p>
</div>


</body>
</html>

Tạo bóng với tham số spread

Tham số spread giúp trải rộng kích thước bóng, bạn có thể thử thông qua ví dụ sau.

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 1px 1px 1px 5px #AAA;
}

</style>
</head>
<body>

<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.com</a></h1>
<h2>box-shadow: 1px 1px 1px #AAA: --- dammio.com</h2>
<div id="div1">
  <p>Tạo bóng cho vùng div với h-offser = 1px, v-offset = 1px, độ blur = 1px và spread=10px.</p>
</div>

</body>
</html>

Tạo nhiều bóng 1 lúc

Ứng với mỗi bóng bạn chỉ cần định nghĩa cách nhau dấu phẩy trong thuộc tính box-shadow. Điều này giúp bạn tạo nhiều bóng, thậm chí tạo được cả hiệu ứng cầu vồng nếu muốn.

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 10px 10px blue, 20px 20px red, 30px 30px yellow;
}

#div2 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 10px 10px 5px blue, 20px 20px 5px red, 30px 30px 5px yellow;
}

</style>
</head>
<body>

<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.com</a></h1>
<h2>box-shadow: 10px 10px blue, 20px 20px red, 30px 30px yellow: --- dammio.com</h2>
<div id="div1">
  <p>Tạo nhiều bóng</p>
</div>

<br/><br/>

<h2>box-shadow: 10px 10px 5px blue, 20px 20px 5px red, 30px 30px 5px yellow: --- dammio.com</h2>
<div id="div2">
  <p>Tạo nhiều bóng có độ mờ (blur)</p>
</div>
</body>
</html>

Tạo bóng bên trong

Ví dụ này sử dụng tham số inset dùng để tạo bóng bên trong vùng giao diện thay vì bên ngoài như thông thường.

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
	width:50%;
	border: 1px solid;
	padding: 10px;
	box-shadow: 10px 10px 10px blue inset;
}
</style>
</head>
<body>

<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.com</a></h1>
<h2>box-shadow: 10px 10px 10px blue inset: --- dammio.com</h2>
<div id="div1">
  <p>Tạo bóng bên trong bằng tham số inset.</p>
</div>

</body>
</html>

Tạo bóng cầu vồng tròn

Trong ví dụ này, bạn sẽ học cách tạo bóng cầu vòng với nhiều màu sắc. Ví dụ sử dụng border-radius: 50% để tạo hình tròn cho vùng giao diện.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 50%;
  margin: 30px auto;
  text-align: center;
}
.rainbow {
  display: block;
  padding: 100px;
  margin-top: 100px;
  border-radius: 50%;
  box-shadow: 
    0 0 0 10px  violet,
    0 0 0 20px  indigo,
    0 0 0 30px  blue,
    0 0 0 40px  green,
    0 0 0 50px  yellow,
    0 0 0 60px  orange,
    0 0 0 70px  red;
  width: 0;
}
 
</style>
</head>
<body>
 
<h1>Ví dụ tạo bóng cầu vòng --- dammio.com</a></h1>
<div>
  <a class="rainbow"></a>
</div>
 
</body>
</html>

Ví dụ box-shadow kết hợp với nút nhấn (button)

Bạn có thể tham khảo ví dụ sau:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <style>
        .button {
            display: inline-block;
            padding: 15px 30px;
            background-color: #e74c3c;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            text-align: center;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .button:hover {
            transform: translateY(-3px);
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>

Ngoài ra, thuộc tính box-shadow còn được áp dụng để tạo viền cho hình ảnh, album, và các đối tượng khác để làm giao diện Web trực quan. Chúc các bạn thành công nhé!

Liên quan:  [HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML
Trích dẫn bài viết
  • APA:
    Dammio. (2019). Hiệu ứng tạo bóng vùng giao diện box-shadow trong CSS. https://www.dammio.com/2019/06/04/hieu-ung-tao-bong-vung-giao-dien-box-shadow-trong-css.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {Hiệu ứng tạo bóng vùng giao diện box-shadow trong CSS},
    year = {2019},
    url = {https://www.dammio.com/2019/06/04/hieu-ung-tao-bong-vung-giao-dien-box-shadow-trong-css},
    urldate = {2024-03-13}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
đại việt
2 năm trước

thank adđ !

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x