CSS3 hỗ trợ việc thêm Shadow cho văn bản hoặc cho các phần tử. Thuộc tính shadow có thể phân chia thành:
- Text shadow
- Box Shadow
Text Shadow trong CSS
Với CSS3, bạn có thể thêm shadow cho văn bản. Ví dụ sau minh họa cách thêm shadow cho văn bản trong CSS3:
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Vi du Text Shadow trong CSS</h1>
<h2>Vi du Text Shadow trong CSS</h2>
<h3>Vi du Text Shadow trong CSS</h3>
<h4>Vi du Text Shadow trong CSS</h4>
<h5>Vi du Text Shadow trong CSS</h5>
<h6>Vi du Text Shadow trong CSS</h6>
<p>Vi du Text Shadow trong CSS</p>
</body>
</html>Kết quả là:
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Box Shadow trong CSS3
Để thêm hiệu ứng shadow cho các phần tử, bạn có thể sử dụng thuộc tính box-shadow trong CSS3. Ví dụ sau minh họa cách sử dụng Box Shadow:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>Vi du Box Shadow trong CSS</div>
</body>
</html>Kết quả là:
Vi du Box Shadow trong CSS
