Category Archives: CSS3

Nơi tổng hợp những bài viết về CSS3 – Phiên bản CSS mới nhất.

Bài 4: Chia cột trong CSS3

By max2max | Posted in: August 29, 2010
columns, css3, code24h.com

Một thuộc tính mà ít ai để ý đó là thuộc tính chia cột. Chức năng này mới chỉ phát triển trên Webkit và FF. Nhờ vào đó, ta không cần phải định dạng nhiều cho mệt nữa, rất phù hợp với các site Magazine.

Cách sử dụng:

Read more…

Posted in CSS3 | Tagged , , | 33 Comments

Bài 3: Hiệu ứng bo tròn (border-radius)

By max2max | Posted in: August 29, 2010

Bình thường, để bo tròn bạn phải sử dụng một tấm ảnh và một số thủ thuật rất phức tạp, trong CSS3 thì rất đơn giản.

border-radius: [kích cỡ];

-moz-border-radius: [kích cỡ];

-webkit-border-radius: [kích cỡ]

Trong đó moz-border-radius dành cho Firefox, -webkit-border-radius dành cho Webkit và border-radius dành cho các trình duyệt khác.

Ví dụ

[codesyntax lang="css"]

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

[/codesyntax]

Đối với trường hợp không muốn bo tròn toàn bộ

[codesyntax lang="css"]

-moz-border-radius-topright: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

[/codesyntax]

Ví dụ này cho thấy các bo tròn phần đầu bên phải và phần chân bên phải, mỗi phần 10px. Cú pháp của Firefox và Webkit khác nhau nên thận trọng để tránh nhầm lẫn.

Posted in CSS3 | Tagged , , | 3 Comments

Bài 2. Hiệu ứng Text-Shadow

By max2max | Posted in: August 29, 2010

  • Hiệu ứng text-shadow giúp hiển thị bóng cho chữ.

Sử dụng

text-shadow: [toạ độ X] [toạ độ Y] [độ mờ] [màu sắc];

Ví dụ

[codesyntax lang="css"]

text-shadow: 1px 1px 20px #666;

text-shadow: 1px 1px #fff;

text-shadow: 0 0 #

[/codesyntax]

Text-Shadow cũng hỗ trợ việc sử dụng nhiều hiệu ứng shadow cùng 1 lúc cách nhau bởi dấu phẩy. Ví dụ:

[codesyntax lang="css"]

text-shadow: 0 0 4px #ccc,

0 -5px 4px #ff3,

2px -10px 6px #fd3,

-2px -15px 11px #f80,

2px -18px 18px #f20;

[/codesyntax]

Hiệu ứng cho ta một đoạn chữ bốc lửa, quá tuyệt vời phải không? Bình thường để làm việc này bạn phải dùng Photoshop đấy!

Posted in CSS3 | Tagged , , | 2 Comments

Bài 1. Giới thiệu

By max2max | Posted in: August 29, 2010

  • CSS3 là một chuẩn CSS mới nhất vẫn trong giai đoạn phát triển.
  • CSS3 tích hợp với HTML5 rất tốt và có thể kết hợp với SVG và XUL
  • CSS3 rất tuyệt vời, có thể thay thế cho nhiều hiệp ứng jQuery phức tạp và rất dễ học.

Nhược điểm:

  • CSS3 không hiển thị trên IE6, IE7 và IE8
  • Một số hiệu ứng chỉ có thể chạy được trên Webkit (Bao gồm Chrome và Safari)

Yêu cầu:

- Trước khi học CSS3, yêu cầu bạn phải biết CSS2

Posted in CSS3 | Tagged , , | Leave a comment