Cách Trình Bày Trang Web
CSS Giúp đỡ và gợi ý

Tài liệu nầy được phiên dịch từ W3C's Web Style Sheets CSS Tips & Tricks Bóng thả. Tài liệu nầy có thể có những phiên dịch sai sót. Quí vị có thể tham khảo với bản chính tiếng Anh ở:
https://www.w3.org/Style/Examples/007/shadows


Người phiên dịch:
Manh Nguyen, Hillsborough County New Construction
Homes for Sale in New Port Richey Smoky Mountain Cabins For Sale

(This page uses CSS style sheets)

Demo

Bóng thả

CSS2 không có thuộc tính để thêm bóng vào một hộp. Bạn có thể thử thêm vào một đường viền bên phải và dưới cùng, nhưng nó sẽ trông không đẹp mắt. Tuy nhiên, nếu bạn có hai phần tử lồng vào nhau, bạn có thể sử dụng phần tử phía ngoài làm bóng cho phần tử bên trong. Ví dụ, nếu bạn có một văn bản như thế này (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>
    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

Bạn có thể sử dụng DIV phía ngoài làm bóng cho DIV bên trong. Kết quả có thể sẽ trông như trang riêng này. Đầu tiên, cho BODY một hình nền (trong ví dụ này là xanh nhạt), hình nền của DIV phía ngoài đậm hơn một chút (xanh-xám) và DIV bên trong có một hình nền khác (như vàng-trắng):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Tiếp theo, sử dụng lề (margins) và đệm lót (padding), bạn sẽ chừa một chút khoảng trống cho

DIV bên trong lệch về phía trái và phía bên trên từ DIV bên ngoài:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Bạn cũng cần di chuyển DIV phía ngoài lệch sang bên phải một chút. Và nếu bạn có nhiều đoạn, có thể bạn cũng muốn có một số khoảng trống giữa chúng:

div.back {margin: 3em 0 3em 5em}

Về cơ bản là như vậy. Bạn có thể thêm một đường viền xung quanh DIV bên trong nếu bạn muốn. Bạn cũng sẽ có thể muốn có một vài đệm lót bên trong nó, ví dụ:

div.section {border: thin solid #999; padding: 1.5em}

Tất nhiên bạn có thể thay đổi kích thước bóng theo ý thích.

Bóng chữ

CSS có thuộc tính để tạo bóng cho chữ. Nó có 4 đối số: màu của bóng, khoảng trống ngang (đại lượng dương nghĩa là lệch về bên phải), khoảng trống đứng (đại lượng dương nghĩa là lệch về bên dưới) và hình mờ (0 nghĩa là một bóng rõ ràng). Ví dụ:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Chữ này có bóng không?

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Viết ngày 4 tháng tư. 2002;
Mới được thay đổi ngày: 2008/11/04 19:22:23 $ GMT