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 Các trang Web mẫu Một vài thủ thuật và lời khuyên trong CSS. 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 ở: http://www.w3.org/Style/Examples/007/text-shadow.html Bản phiên dịch tiếng Việt: http://www.300yards.com/007/text-shadow.html Clearwater Homes Người phiên dịch: Manh Nguyen

(This page uses CSS style sheets)
Bóng văn bản;
Bóng văn bản mờ:
Văn bản màu trắng có thể đọc được:
Nhiều bóng:
Đường viền ngoài:
NPhát sáng như đèn Nê-ông:
Bóng văn bản

CSS cấp 3 có một đặc tính gọi là bóng chữ (text-shadow) để tạo bóng cho từng chữ cái trong một vài từ. Ở dạng đơn giản nhất, bóng văn bản trông như thế này:h3 {text-shadow: 0.1em 0.1em #333}Thêm màu tối xám (#333) để tạo bóng một chút cho phần bên phải (0.1em) và phần dưới (0.1em) so với văn bản thông thường. Kết quả sẽ như thế này: Các Noak và các Barcicle



(Cho tới tháng 8 năm 2005, không phải tất cả các trình duyệt web đều hỗ trợ đầy đủ chức năng 'text-shadow' tạo bóng văn bản. Phần trên làm việc hiệu quả ít nhất tại Safari và Konqueror.)

Bóng văn bản mờ

Dạng đơn giản nhất của thuộc tính 'text-shadow' bóng văn bản có hai phần: Màu sắc (như #333 ở trên) và phần lề “offset” (như 0.1em 0.1em trong ví dụ trên). Những kết quả này tạo thành một bóng sắc nét ở phần lề được hiển thị. Nhưng phần lề có thể được làm mờ, tạo thành các bóng mờ nhiều hay mờ ít.Độ mờ được tạo ra như một lề khác. Đây là hai dòng, một dòng với độ mờ ít (0.05em) và một dòng chữ với độ mờ nhiều (0.2em):h3.a {text-shadow: 0.1em 0.1em 0.05em #333}h3.b {text-shadow: 0.1em 0.1em 0.2em black} “ “Anh nói gì vậy?” UK nói:

Để nhìn rõ hơn





Chữ trắng có thể đọc được

Bóng có thẻ làm văn bản dễ đọc hơn nếu độ tương phản giữa tiền cảnh và nền sau văn bản nhỏ. Đây là một ví dụ về chữ màu trắng trên nền sau màu xanh nhạt; đầu tiên không tạo bóng và sau được tạo bóng:h3 {color: white}h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}Không có bóng:Cái gì ở trong đó dành cho tôi vậy?

Có bóng:Một cái xẻng và vài quả cam





Nhiều bóng:

Bạn cũng có thể tạo nhiều bóng cho văn bản. Nhìn chung, nó nhìn sẽ khá lạ mắt:h3 {text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006} Tôi ước ước ước…



Nhưng với các bóng đậm và nhạt khéo xếp đặt, hiệu ứng đạt được có thể sẽ rất hữu ích;h3.a {text-shadow: -1px -1px white, 1px 1px #333}h3.b {text-shadow: 1px 1px white, -1px -1px #333}Tôi, Augustus (anh biết là ai)

Đó là phần thêm, tất nhiên



Việc này hơi nguy hiểm, như bạn có thể thấy nếu trình duyệt của bạn không hỗ trợ chức năng 'text-shadow' tạo bóng văn bản. Thực tế, màu nền sau và màu văn bản trong ví dụ này gần như giống nhau (#CCCCCC và #D1D1D1), do đó nếu không tạo bóng, thì hầu như không có sự tương phản nào.

Vẽ các chữ như có viền ngoài

Một ví dụ hai bóng trong bài trước còn có thể được làm nhiều hơn. Với bốn bóng, các chữ cái có thể tạo thành một đường viền:h3 {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}Anh có cảm thấy màu đỏ ?

Một con mèo, một quả táo...vv



Đó không phải là một đường viền hoàn hảo, và trong thời điểm này (tháng 8 năm 2005), các cuộc thảo luận vẫn xoay quanh liệu CSS có nên có một thuộc tính riêng (hoặc có lẽ có một giá trị 'text-decoration' để trang trí văn bản) nhằm tạo các đường viền ngoài tốt hơn.

Phát sáng như đèn Nê-ông

Nếu bạn tạo bóng mờ bên phải phía dưới văn bản, Ví dụ: với phần lề bằng 0, thì sẽ tạo ra hiệu ứng phát sáng bao quanh các chữ. Nếu sự phát sáng của một bóng đơn không đủ mạnh, bạn chỉ việc lặp lại bóng đó vài lần.h3.a {text-shadow: 0 0 0.2em #8F7}h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}Thật là thú vị

Không có phủ định tốt hơn

Quả thục, đúng vậy, Mr M




Phạm vi hoạt độngKỹ thuật báo cáoMục lụcPhiên dịchPhần mềmTiềm kiếmBên cạnh:Cách thứcCSSGiúp đỡ và gợi ý

Bert Bos
viết ngày 4 tháng 8 năm 2005;
cập nhật lần cuối lúc 12:46:42 $ GMT ngày 03/03/2009

Có nghĩa là kiểu chữ tỏng forum xe biến thành chữ 3d

demo nhé


Enlarge this imageReduce this image Click to see fullsize

cách để làm 3d hóa cả forum < hiện luôn trong bài viết>
vào css , paste code này vào , vào trên cùng hay dưới cùng cũng ok
Code:body {
text-shadow: 0.5px 0.5px 0 black, 1.5px 1.5px 0 black;
}
trong đó bạn có thể thay 0.5 hoặc 1.5 bằng con số khác , thay black = màu khác
và bạn còn có thể chèn những màu hiệu ưng sau < cái này áp dụng cho toàn thể fourm>
Code:body {text-shadow: 0.1em 0.1em #333}
demo

tương tự như vậy , các bạn có thể vào web này để tìm code có hiệu ứng
http://www.300yards.com/007/text-shadow.html
và để cho nick admin hay mod có màu chói , hiệu ứng hay chỉ là một đường link dẫn nào có hiệu ứng , bạn dùng code này
Code:
a[href="/profile.forum?mode=viewprofile&u=1"] {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
Trong đó /profile.forum?mode=viewprofile&u=1 là link dẫn đến người< hoặc đường dẫn > mà bạn muốn có hiệu ứng , {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87} là mã code hiệu ứng , bạn có thể thay tùy thích
và bạn muốn hiệu ứng chỗ nào < ví dụ như thanh tiêu đề , hoặc 1 cái gì đó thì chỉ cần lấy mã màu hiệu ứng dán vào
chúc bạn thành công


Nguon: diendan.chinhphuc.info