Tạo hiệu ứng lật ảnh cho liên kết dạng ảnh bằng CSS3

Trong bài viết Thiết kế phong cách cho liên kết bằng CSS chúng tôi đã giới thiệu cho các bạn cách để thay đổi cách mà liên kết dưới dạng anchortext được hiển thị. Vậy với liên kết ở dạng ảnh thì sao? Chúng tôi sẽ cho bạn câu trả lời ngay bây giờ.

Rollovers (lật ảnh) là một phương pháp cơ bản trong thiết kế web. Nó sử dụng hiệu ứng điều khiển khi di con trỏ chuột lên đối tượng (hover). Phương pháp này đặc biệt hữu ích cho những liên kết dưới dạng hình ảnh. Nói đơn giản, nó thay đổi hình ảnh khi con chỏ chuột quét qua. Dưới đây là một số bước để làm được điều này, trong đó có một số hiệu ứng CSS3 mở rộng cho hiệu ứng lật ảnh hiện đại.

Tráo đổi ảnh

Hiệu ứng lật ảnh được áp dụng sớm nhất bằng việc sử dụng mã JavaScrip để tráo đổi hai ảnh với nhau. Tuy nhiên khi CSS xuất hiện, với tính năng có sẵn :hover, chúng ta có thể thay đổi một hình nền đã được sử dụng cho liên kết.

Để làm được điều này thì bạn  có thể tham khảo đoạn code sau:

1. a {
2.     display: block;
3.     width: 200px;
4.     height: 63px;
5.     background-image: url(images/toucanfade.jpg);
6.     text-indent: -999em;
7. }
8.  
9. a:hover {
10.     background-image: url(images/toucan.jpg);
11. }

Các liên kết được chồng lên bằng hình ảnh (“toucanfade.jpg”) và nó sẽ được thay thế bằng ảnh (“toucan.jpg”) khi con trỏ chuột di chuyển qua.

Vấn đề xảy ra ở đây là việc chậm trễ của hiệu ứng khi hình ảnh thay thế cần thời gian để tải xuống.

Cách xử lý vấn đề này là tải cả hai ảnh cùng lúc, cho chúng chồng lên nhau với ảnh ban đầu nằm bên trên.

Việc này có thể thực hiện bằng đoạn code CSS dưới đây, đạt được kết quả tương tự ví dụ trên nhưng được đáp ứng tức thời khi con trỏ chuột di chuyển qua:

1. a {
2.     display: block;
3.     width: 200px;
4.     height: 63px;
5.     background-image: url(images/toucancombo.jpg);
6.     text-decoration: none;
7.     text-indent: -999em;
8. }
9.  
10. a:hover {
11.     background-position: bottom;
12. }

Làm mờ ảnh

CSS sẽ không cho phép bạn thay đổi độ trong suốt của hình nền. Tuy nhiên bạn có thể làm điều đó nếu sử dụng hình ảnh thay thế cho liên kết. Bằng việc sử dụng cả hai ảnh để thay thế cho liên kết, sau đó làm mờ  ảnh bên trên để khiến cho quá trình chuyển đổi trở nên trơn tru.

Chúng ta có thể tha đổi độ mờ của một box có chứa ảnh nền. Vậy nếu chúng ta đặt hai hộp chồng lên nhau, chúng ta cũng vẫn đạt được hiệu quả tương tự:

1. #toucan {
2.     display: block;
3.     width: 200px;
4.     height: 63px;
5.     background: url(images/toucancombo.jpg);
6.     text-indent: -999em;
7.     position: relative;
8. }
9.  
10. a:after {
11.     content: "";
12.     display: block;
13.     width: 200px;
14.     height: 63px;
15.     background: url(images/toucancombo.jpg) bottom;
16.     position: absolute;
17.     top: 0;
18.     opacity: 0;
19.     -webkit-transition: .5s;
20.     transition: .5s;
21. }
22.  
23. a:hover:after {
24.     opacity: 1;
25. }

Ở đây, chúng tôi tạo hai hộp chồng lên trên liên kết với hình ảnh thay thế. Ẩn đi một hộp, và khi chuột di chuyển qua hình ảnh thì.... BAMMM. Vô hình trở nên hữu hình và hiệu ứng lật ảnh xảy ra.

Có thể bạn sẽ có hứng thú với việc Làm hiệu ứng popout bằng CSS3. Điều này sẽ cho phép bạn hiển thị nội dung đẹp mắt hơn cho website cũng như thu hút người sử dụng đến với website, dịch vụ mà bạn cung cấp.