CSS3 và các công cụ

(Lưu ý: Các bạn nên tìm hiểu về HTML và CSS trước khi xem các vị dụ bên dưới)

Các công cụ của CSS3:

    * Border Radii (Đường viền)
    * Box Shadows (Đổ bóng hộp)
    * Text Shadows (Đổ bóng văn bản)
    * Gradients (Dải mầu)
    * Multiple Backgrounds (Đa nền)

Công cụ: Border Radii

Trình duyệt hỗ trợ:

    * Safari: 3.2 +
    * Firefox: 3.0 +
    * Chrome: 3.0 +
    * Opera: 10,5 +
    * Internet Explorer: 9,0 +

Hiện nay, bạn có thể nghe rất nhiều về đường viền, nó rất dễ để sử dụng và hỗ trợ trên tất cả các trình duyệt mới hiện nay. Nếu bạn chưa rõ về vấn đề này thì đường viền là cách để tạo ra các góc với CSS mà không cần sử dụng hình ảnh. Chúng ta hãy xem doạn mã dưới đây:

Đoạn mã đầu tiên là sử dụng cho các trình duyệt trên nền Webkit như Safari và Chrome. Đoạn mã thứ hai sử dụng cho các trình duyệt trên nền Mozilla như Firefox. Và cuối cùng là cho các trình duyệt không cần tền tố như IE9, Opera, và Safari 5.

Áp dụng với đường viền cắt góc 10px ta được hiệu ứng sau:

Công cụ: Border Shadows

Trình duyệt hỗ trợ:

    * Safari: 3.2 +
    * Firefox: 3.0 +
    * Chrome: 3.0 +
    * Opera: 10,5 +
    * Internet Explorer: 9,0 +

Chúng ta hãy xem đoạn mã sau:

Chúng ta vẫn phải sử dụng tiền tố cho các trình duyệt trên nền Webkit và Mozilla. Các tùy chọn offset_x, offset_y tương ứng là khoảng cách từ mép trái và mép trên của đối tượng tới bóng. blur_radius là độ lớn của bóng và color là màu của bóng. Tạo một hiệu ứng với một thẻ div ta được hiệu ứng sau:

Chúng ta có tể tạo ra đổ bóng vào trong bằng việc thêm từ khóa "inset", điều này có thể tạo ra hiệu ứng đẹp cho các nút bấm.

Tính năng cuối của đổ bóng hộp là đổ nhiều bóng trên cùng một đối tượng. Để tạo ra nhiều bóng bạn chỉ cần ngăn cách các giá trị bằng dấu phẩy ",". Hãy xem ví dụ sau:

Công cụ: Text Shadows

Trình duyệt hỗ trợ:

    * Safari: 3.2 +
    * Firefox: 3.0 +
    * Chrome: 3.0 +
    * Opera: 10,5 +
    * Internet Explorer: Không.

Đổ bóng văn bản cũng gống như đổ bóng hộp nhưng là tạo bóng cho văn bản thay vì tạo bóng cho cả đối tượng. Điều khác biệt nữa là không phải sử dụng tiền tố cho các trình duyệt khác nhau.

Các tùy chọn của đổ bóng văn bản cũng giống như đổ bóng hộp ngoại trừ không có đổ bóng vào trong như đổ bóng hộp. Hãy cùng xem ví dụ sau:

Ta được hiệu ứng:

Ta cũng có thể đổ nhiều bóng cho văn bản bằng việc ngăn cách các giá trị bằng dấy phẩy ",":

Còn nữa.