Box-shadow 3D style
Thử một vài giá trị box-shadow khác nhau để thành phần có nhiều dạng phong phú, nếu biết điều chỉnh hợp lý chúng ta sẽ dễ dàng tạo được dạng như mong muốn.
Trình duyệt – hệ điều hành hỗ trợ
Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
Trình duyệt
9
4
10.5
10
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
7.5
box-shadow một số định dạng thường dùng
- Kỹ thuật sử dụng box-shadow tạo đường bao ngoài mà không dùng bất kỳ background hay border nào khác.
- Tham khảo thêm box-shadow
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
div {
border: 2px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 0px 8px 0px #ccc;
-webkit-box-shadow: 0px 0px 8px 0px #ccc;
box-shadow: 0px 0px 8px 0px #ccc;
margin: 20px;
padding: 10px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<p>Đoạn văn đơn giản của Học Web Chuẩn, mỗi một đoạn văn bản chúng ta cần sử dụng một tag p tương ứng.</p>
<p>với đoạn văn bản này chúng ta có thể viết liên tục, khi nào đạt tới giới hạn chiều rộng của thẻ cha thì sẽ tự động xuống hàng.</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box-shadow bên dưới cho đoạn văn bản
- Kỹ thuật sau sử dụng thường cho các thành phần trông có vẻ trôi nổi, cũng vẫn là cách dùng box-shadow.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
div {
border: 2px solid #ccc;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 30px 9px -20px #ccc;
-webkit-box-shadow: 0px 30px 9px -20px #ccc;
box-shadow: 0px 30px 9px -20px #ccc;
margin: 20px;
line-height: 50px;
height: 50px;
text-align: center;
width: 160px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<p>Học Web Chuẩn.</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
box-shadow bên dưới cho đoạn văn bản dạng box 3D
- Nếu bạn chưa biết cách tạo đối tượng 3D như thế nào thì đây là một trong những cách đó, dành riêng cho các đối tượng dạng box nhe.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
div {
border: 2px solid #ccc;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
/* box-shadow: ngang dọc độ-tràn-màu khoảng-cách mã-màu; */
-moz-box-shadow: 0px 6px 0px 1px #ccc;
-webkit-box-shadow: 0px 6px 0px 1px #ccc;
box-shadow: 0px 6px 0px 1px #ccc;
margin: 20px;
line-height: 50px;
height: 50px;
text-align: center;
width: 160px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div>
<p>Học Web Chuẩn.</p>
</div>
</body>
</html>