Một vài thuộc tính CSS3 cần biết

Với công nghệ ngày càng phát triển, trình duyệt web ngày càng thông minh và  trở lên thân thiện hơn với người dùng. Bạn là người thiết kế web hay chỉ là tò mò tìm hiểu thì việc áp dụng Css3 trong thiết kế cũng là một điều đáng chú ý,  điều sẽ làm bạn thích thú đó là bạn không phải cắt vụn giao diện bằng Photoshop rồi sau đó gép từng mảnh lại bằng các thẻ html chỉ vì chúng sẽ bo góc, có đổ bóng hay chuyển sắc, ngày nay chúng ta có thể làm được rất nhiều thứ mà trước kia chỉ thể hiện được bằng Photoshop với một vài thuộc tính Css3 đơn giản, và còn nhiều hơn thế nữa nếu bạn không biết gì về javacript hoặc flash nhưng bạn vẫn có thể tạo được animation với Css3.

Trở ngại lớn nhất của Css3 là chúng chưa được thực hiện đầy đủ trên tất cả các trình duyệt web. Chúng ta sẽ tìm hiểu về vấn đề này ở một số thuộc tính Css3 phổ biến nhất

border-radius

Bo góc cho phần tử với giá trị là phạm vi góc. Được hổ trợ ở Safari3+, Chrome3+, Firefox1+, Opera10.5+, and IE9 beta. Ví dụ:

.foo{ border-radius: 10px; }

1 2 3

.foo{    border-radius: 10px; }

text-shadow

Đây là thuộc tính có ở Css2 được giới thiệu lại. Thêm đổ bóng cho văn bản, với tùy chọn giá trị là hướng, độ nhòe và màu của bóng. Được hổ trợ ở Safari1.1+, Chrome2+, Firefox3.1+, and Opera9.5+. Ví dụ:

p{ text-shadow: 1px 1px 2px #999; }

1 2 3

p{    text-shadow: 1px 1px 2px #999; }

box-shadow

Thêm đổ bóng cho phần tử, phần tùy chọn cũng giống như text-shadow. Được hổ trợ ở Safari3+, Chrome3+, Firefox3.5+, Opera10.5+, and IE9 beta. Ví dụ:

.foo{ box-shadow: 1px 1px 2px #999; }

1 2 3

.foo{    box-shadow: 1px 1px 2px #999; }

Đa hình nền

Css3 thêm khả năng áp dụng đa hình nền trên một phần tử. Được hổ trợ ở Safari1.3+, Chrome2+, Firefox 3.6+, Opera 10.5+, and IE9 Beta. Ví dụ:

body { background: url(image1.png) no-repeat top left, url(image2.png) repeat-x bottom left, url(image3.png) repeat-y top right; }

1 2 3 4 5

body {    background: url(image1.png) no-repeat top left,    url(image2.png) repeat-x bottom left,    url(image3.png) repeat-y top right; }

Trong suốt

Thể hiện độ mờ của phần tử, giá trị 1 nghĩa là màu rõ ràng, giá trị 0 nghĩa là hoàn toàn trong suốt. Được hổ trợ ở Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+. Ví dụ:

.foo { opacity: 0.5; /* .foo sẽ trong suốt 50% */ }

1 2 3

.foo {    opacity: 0.5; /* .foo sẽ trong suốt 50% */ }

Hệ màu RGBA

Không phải là thuộc tính Css, nhưng đúng hơn là một kiểu màu được giới thiệu trong Css3. Với 3 màu cơ bản red, green và blue nhận giá trị từ 0 tới 255 ngoài ra với vùy chọn thứ 4 ta có thể điều chỉnh được độ trong suốt của màu. Được hổ trợ ở Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+, and IE9 Beta. Ví du:

.foo { color: rgba(0, 0, 0, 0.75); /* Đen 75% */ }

1 2 3

.foo {    color: rgba(0, 0, 0, 0.75); /* Đen 75% */ }

Còn nhiều thuộc tính Css3  khác nữa như gradient, transform, transition… tất cả làm cho việc dựng bố cục web thật đơn giản, để tìm hiểu chi tiết bạn có thể truy cập website của tổ chức W3C. Ngay bây giờ bạn hãy bắt tay vào thực hiện những website sử dụng Css3 nhiều hơn được rồi.