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 ở:
https://www.w3.org/Style/Examples/007/roundshadow.html

Bản phiên dịch tiếng Việt:

Người phiên dịch:
Manh Nguyen, www.clearwaterfloridarealestatesite.com
www.oldsmarflrealestate.com
Homes For Sale In Sevierville TN

(This page uses CSS style sheets)

Làm tròn và tạo bóng

5 hình ảnh

Kết quả

Các góc tròn và bóng hộp

CSS3 sẽ có các thuộc tính nhằm tạo các đường viền tròn bao gồm các hình ảnh và các hộp có bóng. Nhưng với vài động tác, bạn có thể tạo thành chúng ngay với CSS2 mà không cần bất cứ bảng hay sự đánh dấu thêm nào.

Trang này bắt nguồn cảm hứng từ Arve Bersvendsen, người có nhiều mẫu CSS thú vị hơn.

Đương nhiên, việc tạo các đường viền tròn và tạo bóng sẽ đơn giản hơn nhiều với CSS3. Ví dụ: Để tạo một đoạn văn bản có một đường viền đỏ đậm với các góc uốn tròn, bạn sẽ chỉ cần hai đường kẻ CSS3 giống như thế này:

P { border: solid thick red;    border-radius: 1em }

Và để tạo thành một bóng mờ một nửa em ở phía dưới và về phía bên phải của đoạn văn bản, thì chỉ một đường là đủ:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Bạn có thể thử ở đây xem nó có hoạt động không). Nhưng nếu bạn cần chúng ngay bây giờ và bạn không ngại phức tạp và thiếu linh hoạt, bạn có thể sử dụng kỹ thuật dưới đây. Và ít nhất, nó sẽ là một kiểm tra tốt cho các trình duyệt có nhiều lỗi...

5 hình ảnh trên một yếu tố

Thủ thuật chính là sử dụng các nội dung đã được tạo ra ( ‘::trước’ và ‘::sau’) để đặt thêm bốn hình ảnh trên một yếu tố. Phần yếu tố giả ‘:: trước’ có thể có một hình nền sau và một hình tiền cảnh, cũng như vậy, yếu tố giả ‘::sau’ và bản thân yếu tố đó có một nền sau, tạo thành tổng số 5 hình ảnh.

Chúng ta tạo ra 5 hình ảnh định dạng PNG và đặt chúng vào bốn góc và đối diện với cạnh phải của yếu tố. Sau đây là các hình ảnh:

Góc trái trên::
top left corner
Cạnh trên và góc phải trên:
top right corner
Phần giữa và cạnh phải:
background and right edge
Góc trái dưới:
bottom left corner
Cạnh đáy và góc phải dưới:
bottom and bottom left corner

Và đây là quy tắc CSS cho đặt vị trí hình ảnh:

blockquote {    max-width: 620px;    background: url(rs-right.png) right repeat-y }blockquote::before {    display: block;    line-height: 0;    background: url(rs-topright.png) top right no-repeat;    content: url(/rs-topleft.png) }blockquote::after {    display: block;    line-height: 0;    background: url(rs-bottomright.png) bottom right no-repeat;    content: url(rs-bottomleft.png) }

Vì ảnh nền sau của chúng ta có chiều rộng 620 px, chúng ta không thể tạo hộp rộng hơn 620 px mà không có khoảng trống. Đó là lý do tại sao có thuộc tính ‘max-width’ ở đây. Cần có thuộc tính ‘display:block’ để đảm bảo rằng nội dung được tạo ra sẽ tạo thành các hộp của chính nó ở phía trên và phía dưới nội dung chính; thay vì được chèn vào dòng đầu tiên và cuối cùng. 'line-height: 0' để đảm bảo không có khoảng trống nào thừa cho các phần trồi lên và các phần thấp bên trên và bên dưới hình ảnh trong thuộc tính ‘content’.

Kết quả

Và đây hình dạng đạt được:

Bạn có thấy hộp màu xanh nhạt với các góc tròn và bóng đổ trên nền trắng? Nếu không thấy, trình duyệt của bạn đã không xử lý nội dung được tạo thành một cách chính xác (hoặc không xử lý chút nào).

Mã nguồn HTML thực sự không hơn cái mà nó có thể đạt được:

<blockquote><p>Do you see a pale green box with rounded cornersand a drop shadow against a white background? If not,your browser isn't handling the generated contentcorrectly (or maybe not at all).</blockquote>

Và nếu bạn muốn kiểm tra xem trình duyệt của bạn có thể thực hiện được chức năng này theo cách thực hiện của CSS3 hay không, bạn có thể thử tại đây.

CSS Valid CSS!Valid HTML 4.0!

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