Làm hiệu ứng hover đẹp mắt với thư viện css3 - hover.css

hover.css là một thư viện các hiệu ứng hover css3 có thể dễ dàng áp dụng lên các phần tử website của bạn như button, logo, image... Hiện tại bộ thư viện này có đến hơn 40 hiệu ứng cho các bạn lựa chọn.

Nó là một file stylesheet bao gồm nhiều class khác nhau, tương ứng với mỗi class sẽ cho bạn một hiệu ứng chuyển động. Nếu bạn thành thạo về css bạn có thể hoàn toàn đi sâu vào nội dung file css để chỉnh sửa nó theo ý mình...

1. Thêm hover.css và website.

- Trước tiên bạn cần download thư viện này về tại đây. Trong file download về bạn có thể tìm thấy ví dụ sẵn để xem qua.

- Tiếp theo ta cần thêm thư viện css này vào phần head vào website của bạn

<link href="css/hover-min.css" rel="stylesheet" />

2. Áp dụng hover.css cho một phần tử cụ thể

- Ví dụ ở đây mình sẽ áp dụng hiệu ứng pulse cho 1 button, ta có html sẽ như sau

<input type="button" id="btExample" value="Hover Me!" class="button pulse" />

- Như ở button trên, class button là class của bạn (Thiệt lập style do ban quy định ở website của mình). class='pulse' là class để áp dụng hiệu ứng hover khi di chuột lên button đó. Còn rất nhiều hiệu ứng chuyển động đẹp mắt, các bạn có thể xem thêm ở đây.

- Hiệu ứng hover hoạt động trên các thiết bị như iphone & ipad có thể không chính xác, thường xẩy ra hiện tượng phải click double lên link có hiệu ứng hover thì mới có tác dụng. Để sửa lỗi này ta cần một đoạn script nhỏ dưới đây.

//fix error hover in IOS
      $('a').on('click touchend', function (e) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
      });

4. Kết luận.

- hover.css là một thư viện css3 rất nhỏ gọn nhưng đem lại hiệu quả cao cho website của bạn và dễ sử dụng. Các bạn có thể downoad ví dụ ở file đính kèm cuối bài viết.

Download Source

Related Post


Validate form sử dụng BootstrapValidator cho website Asp.Net
Friday, August 15, 2014
Validate form cho website có rất nhiều plugin jquery hỗ trợ. Nhưng với những ai đang sử dụng bootstrap thì theo mình nghĩ dùng BootstrapValidator là hay nhất vì nó "đồng bộ" và có tính tùy biến khá cao. Và đặc biệt tác giả là Nguyen Huu Phuoc, một người Việt Nam nhé.
Sử dụng Popover Boostrap hiện thị thông tin chú thích dạng tooltip
Friday, August 1, 2014
Popover Boostrap là một dạng tooltip trong Bootstrap hỗ trợ hiện thị thông tin ghi chú khá đẹp, không chỉ hỗ trợ hiện thị nội dung dưới dạng text mà còn cho phép hiện thị nội dung với cấu trúc html phức tạp mang lại hiệu quả và tính thẩm mỹ cao trong phát triển layout website.
Search

Đăng ký nhận bài mới


Category

Blog Archive