Tạo hiệu ứng đặc biệt với CSS3

Như các bạn đã biết, IE 6 – > IE8 chưa hỗ trợ CSS3 - điều mà các thế hệ đi sau như Firefox, Oprea, Chrome, Safari đã làm được.Tuy rằng sau IE6 đã không còn ai kêu ca sự phiền toái khi duyệt IE bởi nó thiết kế chẳng theo một chuẩn web nào cả, nhưng chỉ từ khi IE 9 ra đời với tương thích css3 , chuẩn html5 và nhiều thứ khác, sự thống nhất giữa các trình duyệt mới được nâng lên một mức cao hơn. So với CSS2 thì CSS3 có một số cái mới như border-radius, box-shadow, border-image, multiple background images, linear-gradient, color rgba, transforms và transitions...
Bài viết này sẽ giới thiệu đến các bạn một số trong những cái "mới" đó.

1. Hiệu ứng Transforms
Hiệu ứng xoay (Rotate)
Để tạo hiệu ứng nghiêng ta sẽ sử dụng một số thuộc tính của CSS 3, nghĩa là hiệu ứng có thể không tác dụng khi bạn duyệt bằng IE 6, 7 hoặc 8. Nhưng không phải hoàn toàn là không thể được, dù code tương thích với chúng là quá phức tạp. Mình sẽ hướng dẫn các bạn mẹo lấy code ở phần sau.

Hãy xem CSS có thể tạo ra hiệu ứng rotate thế nào
.element {
-moz-transform: rotate(45deg); /* FF3.5+
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome
-o-transform: rotate(45deg); /* Opera 10.5+
-ms-transform: rotate(45deg); /* IE9
transform: rotate(45deg);
}

Hãy nhớ tiền tố tương thích cho từng loại trình duyệt -moz- cho Mozilla, -webkit- cho Webkit (Chrome và Safari), và -o- (hoặc không) cho một số phiên bản của opera.
Giá trị của rotate có thể lấy độ dương (quay cùng chiều kim đồng hồ) hoặc độ âm (ngược chiều kim đồng hồ), bạn có thể set giá trị >360 độ, tương ứng với nhiều vòng quay. Điều này rất có ích khi thiết kế blog opera chẳng hạn, ta có thể dùng hiệu ứng này trong các event hover.

Hiệu ứng giãn nở (Scale)
Ta có thể căn chỉnh chiều rộng và chiều cao của một phần tử bằng cách sử dụng tỷ lệ phần trăm (1 = 100%, 0.5 = 50% v.v...)
.element {
-webkit-transform: scale(1.2);
-moz-transfrom: scale(1.2);
-o-transform: scale(1.2);
  transform: scale(1.2);
} 

Hiệu ứng dịch (Translate)
Translate ở đây không phải là dịch từ mà là dịch vị trí của một phần tử tương đối (position:relative)
.element {
-webkit-transform: translate(15px, 5px);
-moz-transform: translate(15px, 5px);
-o-transform: translate(15px, 5px);
transform: translate(15px, 5px);
}

Cấu trúc chung là translate(X, Y), bạn có thể cho giá trị X chẳng hạn -15px để có thể dịch theo chiều ngược lại. Như đã nói ở trên, hiệu ứng này chủ yếu được dùng cho event hover.

Hiệu ứng xiên (Skew)
Như tên gọi của nó, hiệu ứng làm cho phần tử cần xét nghiêng đi theo cả 2 trục, trông giống như dạng 3D.

.element {
-webkit-transform: skew(4deg, 10deg);
-moz-transform: skew(4deg, 10deg);
-o-transform: skew(4deg, 10deg);
transform: skew(4deg, 10deg);
}

Ví dụ trên, phần tử sẽ lệch 4 độ theo trục X (trái -> phải) và 10 độ theo trục Y (dưới -> trên)
Tất cả 4 hiệu ứng mình đề cập ở trên đều là hiệu ứng dạng transform, làm biến đổi kích cỡ và góc độ của một phần tử. Sau đây sẽ là hiệu ứng transition, hiệu ứng chuyển tiếp.

2. Hiệu ứng Transitions
Hiệu ứng transition cơ bản:

.example {
-webkit-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.example:hover {
opacity: 0.5;
}

Rất rõ ràng, độ trong suốt của ảnh sẽ giảm một nửa khi ta hover chuột qua ảnh. Xin lỗi vì đã không tạo hiệu ứng trực tiếp để các bạn xem, mình không biết cách nhúng css vào entry của blog opera.

Sử dụng các hiệu ứng nâng cao:
Kết hợp đa thuộc tính - transform và transition:

.example {
opacity: 0.5;
-webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
-o-transition: opacity .5s ease-in-out, -o-transform .5s ease-in-out;
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.example:hover {
opacity: 1;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
background-color: #881100; /* Tạo màu nền cho ảnh
}

Hạn chế:Điểm không thuận tiện là, đa số các hiệu ứng này không tương thích với IE, Firefox chỉ làm việc với transform, transition thì không. Bạn phải "ép" nó bằng cách thêm tiền tố -moz- trước đoạn code của bạn. Ngược lại, cả transform và transition đều tương thích tốt với Opera và Webkit.


3. Hiệu ứng bo tròn góc (Border - Radius)
Thuộc tính bo tròn góc của CSS3 cho phép các nhà phát triển web sử dụng các góc tròn để làm đẹp cho trang web của họ dễ dàng hơn, không cần dùng photoshop để tạo các ảnh round radius hay dùng nhiều thẻ div. Kể từ khi được ứng dụng từ năm 2005, thuộc tính này là một trong những thế mạnh của CSS3 và sau đó được các trình duyệt web hỗ trợ rộng rãi.
Cấu trúc cơ bản:
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]

border-radius: 10px; /* Bo tròn 4 góc, hỗ trợ Opera 10.5, IE 9, Saf5, Chrome
border-top-left-radius: 10px; /* Hoặc 10%
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;

-moz-border-radius: 10px; /* Hỗ trợ FF1+
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;

-webkit-border-radius: 10px; /*Saf3-4

Ví dụ dưới đây hiển thị tốt với các phiên bản hiện thời của Firefox, Safari/Chrome, Opera và thậm chí IE9:

#Example_A {


height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}


#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}



4. Hiệu ứng bóng (Box Shadow và Text Shadow)
Thuộc tính box-shadow của CSS 3 cho phép người thiết kế có thể tạo bóng đổ (trong hoặc ngoài), đặt kích thước bóng, màu sắc và độ mờ của bóng cho các thành phần box (ví dụ #sidebox, .post, hay menu button...)
Phiên bản mới của các trình duyệt hiện thời đều có thể áp dụng hiệu ứng shadow, Opera, FF4+ và IE9 hỗ trợ tốt thuộc tính này, FF3 và Webkit vẫn đòi hỏi phải thêm tiền tố -moz và -webkit- trước code.
Hiệu ứng bóng ngoài

/* Bóng đổ sai trục: left - top là 5px
#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
/* Độ mờ bóng là 5px
#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
/* Độ trải bóng là 5px
#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}/* Giống ví dụ C, độ mờ bóng là 5px
#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
/* Không đặt đổ bóng, độ mờ bóng 5px
#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
/* Giống ví dụ E, độ trải bóng 5px
#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Hiệu ứng bóng trong
Tạo bóng trong với từ khóa inset

 /*Bóng đổ sai trục left - top là 5px
#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}
/* Giống G, độ mờ bóng là 5px
#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}
/* Giống G, độ trải bóng 5px
#Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}/* Độ trải bóng và độ mờ bóng là 5px
#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
/* Không đặt đổ bóng, độ mờ bóng 5px
#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}
/* Giống ví dụ K, thêm độ trải bóng 5px
#Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}

Hiệu ứng đa bóngThuộc tính box-shadow cũng cho phép một thành phần có thể có nhiều bóng, code tương ứng chỉ cách nhau một dấu phẩy. Một thành phần đa bóng thì các lớp bóng sẽ được sắp xếp từ trước ra sau.

#Example_M {
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,
-40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,
-40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red,
-40px 30px yellow, -40px -30px 50px blue;
}

Hiệu ứng Text-shadow
Cấu trúc chung:
Example:   text-shadow: 2px 2px 2px #000

Bóng chữ sẽ đổ về phía dưới bên phải khoảng 2px và độ mờ bóng là 2px, #000 là màu của bóng - màu đen. Bạn có thể thiết đặt text-shadow: -2px -2px 2px #000; nếu muốn bóng đổ lên phía trên bên trái.


5. Multiple Background và RGBA Color
Multiple Background
Tương tự như hiệu ứng đa bóng đã nói ở trên, CSS3 hỗ trợ tốt việc xếp lớp cho các background của một thành phần web. Cấu trúc chung cũng tương tự:
.examle { background: url(link1) bottom center no-repeat, url(link2);}
Bạn có thể set vị trí cho mỗi background ngay sau url( ), tùy ý.
Thứ tự ưu tiên các background-image được sắp xếp từ trước ra sau, ngăn cách nhau bởi dấu phẩy. Thay vì trước đây khi thiết kế bằng CSS2 ta phải gán giá trị z-index cho các thành phần và tạo nhiều thẻ div thì nay ta chỉ cần 1 câu lệnh duy nhất.

RGBA Color
CSS3 thực sự đã loại bỏ sự không cần thiết của photoshop khi thiết kế một trang web với những hiệu ứng đơn giản mà vô cùng hiệu quả. Không cần phải dùng photoshop để tạo một ảnh nền dạng trong suốt, nay designer có thể làm điều đó trực tiếp bằng các đoạn mã với sự hỗ trợ của CSS3.
Cấu trúc chung:
Example: .example {
width:200px;height:200px;
background-color: rgba(180, 180, 144, 0.6);/* FF3+, Saf3+, Opera 10.10+, Chrome, IE9
}

 
Các giá trị ví dụ: Red = 180; Green = 180; Blue = 144; Opacity = 0.6 là các thành phần cơ bản của một màu bất kỳ. Như ví dụ trên là một khung rộng 200x200 pixel, có màu xám và "hơi" trong suốt. Xin lỗi vì mình không biết cách tạo nó ngay trên entry này được. Nhưng các bạn hãy thử xem, ngay trên blog opera của bạn chẳng hạn, Customize design và Edit CSS. Chọn một thành phần bất kỳ như .post hoặc #sidebar .pad và dùng đoạn mã trên, sẽ bất ngờ đấy.
Còn khá nhiều những tác dụng khác của CSS3, như hiệu ứng Linear Gradient, HSLA Color, Border Image... nhưng mình chưa có thời gian tìm hiểu hết vả lại trên đây mình đã giới thiệu những hiệu ứng rất cơ bản và được dùng nhiều trong design. Mình sẽ post thêm nếu các bạn quan tâm nhiều.

Một cách chắc chắn rằng, trang web hay blog mà bạn tự thiết kế không thể hiển thị tốt trên mọi phiên bản của các trình duyệt. Trong tương lai, xu hướng xây dựng trình duyệt theo chuẩn HTML5 và hỗ trợ CSS3 sẽ tạo điều kiện thuận lợi cho các designer, và dân nghiệp dư chúng ta sẽ không phải thêm các đoạn mã dài dòng.
Hy vọng bài này sẽ giúp các bạn tìm ra cách để cái "áo" của blog mình có thêm nhiều điều mới lạ và sự tương thích trình duyệt sẽ không còn là vấn đề. Hãy thử học CSS một lần, thú vị lắm đó.

Bài viết này mình tốn khá nhiều thời gian tìm hiểu và tổng hợp, hy vọng có ai khi sao lưu thì ghi nguồn hộ mình. Thanks.  
End of Tutorial
Copyright by Nguyen Dinh Thien