Xin chào các bạn, bắt đầu từ hôm nay mình sẽ share và hướng dẫn những kiểu css hay đẹp, hoặc thông dụng và sẽ giải thích rõ những thuộc tính liên quan. Những ai chưa biết về css thì vui lòng xem serie css cơ bản của mình để hiểu rõ hơn về css và biết mình nên bắt đầu từ đâu. Show
Hover – định nghĩa và thủ thuậtĐây là tổng hợp những kiến thức về css và các thủ thuật sử dụng css của mình và mình sẽ giải thích theo nghĩa đơn giản nhất cho các bạn hiểu và ứng dụng vào thực tế, còn các bạn muốn chuyên sâu hơn thì hãy nghiên cứu thêm tài liệu tiếng anh để có định nghĩa chính xác nhất có thể. Link tài liệu mình sẽ update sau. Và bắt đầu với chương đầu tiên, mình xin giới thiệu các bạn : Hover . Hover là gì ?Hover được coi là hiệu ứng cơ bản, là hiệu ứng khi rê chuột vào sẽ có những thuộc tính mình đã setup sẵn để trang web của mình động nhất có thể với css. Dưới đây là 1 ví dụ về hover button :
See the Pen ExxaBOY by Mai Truyền (@mai-truyn) on CodePen.0 Cách sử dụng hiệu ứng HoverĐể tạo 1 sự kiện hover đơn giản, trước hết chúng ta cần 1 Base Element làm cơ sở, điển hình như việc bạn muốn nhà đẹp thì phải có cái nhà cái đã. Tương tự : chúng ta tạo 1 thẻ Button cơ bản gán class=”btn” ( các bạn có thể gán class theo project của các bạn để tiện việc quản lý cũng như dễ hiểu ). <button class="btn"> Try hover me </button> Mở thẻ <button> thì phải đóng thẻ </button>. Bây giờ setup cơ bản cho button, để quản lý dễ dàng hơn, chúng ta gọi trực tiếp tới thẻ button với class =”btn” để tránh động chạm code với thể loại khác : button.btn {
width: 200px ; /* Chiều dài bằng 200 px, đây là những kiến thức cơ bản, mình sẽ không nhắc lại */
height: 50px;
font-size:16px; /* kích cỡ của text nằm trong button */
background: #fff; /* Nền màu trắng */
border: 2px solid #333; /* viền button với đường thẳng có kích cỡ là 2px màu đen */
}đã xong cơ bản của một nút button. các bạn xem có thể reset trang của mình vừa khởi tạo để xem hình dạng của nó. Như chúng ta thấy, hiện tại rê chuột vào vẫn chẳng có gì xảy ra ? Bởi vì chúng ta chưa setup sự kiện hover cho nó. Để setup sự kiện hover cho button cũng như các element khác, chúng ta viết theo cấu trúc Để người dùng biết dễ dàng và rõ ràng phần nào của trang web có thể nhấp được là một phần quan trọng của thiết kế UX. Ngày nay, các nhà phát triển hiện có thể thêm các hiệu ứng chuyển tiếp hoặc hoạt ảnh khi một sự kiện di chuột được kích hoạt. Trong bộ sưu tập này, có hơn 250 hiệu ứng di chuột để truyền cảm hứng cho bạn. Bạn cũng có thể lấy mã tại nguồn. Contents
Image Hover Effects (16 hiệu ứng)Trong trang này, bạn sẽ tìm thấy một bộ sưu tập đẹp mắt gồm 16 hiệu ứng hình ảnh rê chuột với chú thích.  Lấy mã HTML và CSS cho từng hiệu ứng bằng cách di chuột qua các hình ảnh, sau đó nhấp vào Show Code. Image Caption Hover Animation (4 hiệu ứng)Dưới đây là 4 hoạt ảnh phụ đề thú vị chạy khi một người di chuột qua hình ảnh. Các hiệu ứng được xây dựng với tinh khiết hiệu ứng chuyển tiếp CSS3 và chuyển đổi , và không có JavaScript, tăng compability trên trình duyệt. iHover (35 hiệu ứng)iHover là một bộ sưu tập các hiệu ứng di chuột được hỗ trợ bởi CSS3. Có 20 hiệu ứng di chuột vòng tròn và 15 hiệu ứng di chuột vuông. Để sử dụng các hiệu ứng, bạn sẽ cần viết một số đánh dấu HTML và bao gồm các tệp CSS. Image Hover (44 hiệu ứng)Thư viện này chứa 44 hiệu ứng được tạo bằng CSS thuần túy. Một số hiệu ứng bao gồm mờ dần, đẩy, trượt, bản lề, tiết lộ, thu phóng, làm mờ, lật, gấp và cửa chớp, theo nhiều hướng. Có một phiên bản mở rộng của 216 hiệu ứng có thể được mua với giá 14EURO. Hover Effect Ideas (30 hiệu ứng)Bản demo di chuột qua hình ảnh này được thực hiện bởi Codrop, mang đến cho bạn cảm hứng khi thực hiện chuyển đổi mượt mà giữa hình ảnh và chú thích của nó. Có tổng cộng 30 hiệu ứng trên hai bộ với hướng dẫn và mã nguồn. Hover CSS (108 hiệu ứng)Hover CSS cho phép bạn thêm hiệu ứng di chuột vào bất kỳ phần tử nào, chẳng hạn như nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm chuyển tiếp 2D, chuyển đổi nền, đường viền, chuyển tiếp Bóng tối và Phát sáng, v.v. Thư viện có sẵn trong CSS, Sass và LESS. Animatism (hơn 100 hiệu ứng)Có hơn 100 hình ảnh động khi di chuột qua các nút, lớp phủ, chi tiết, chú thích, hình ảnh và các nút mạng xã hội. Tất cả các hiệu ứng đều được cung cấp bởi CSS3. See the Pen Pure CSS3 Image Hover Animations by Sahar Ali Raza Caption Hover Effect (7 hiệu ứng)Có 7 hiệu ứng khác nhau trong bộ sưu tập này. Tất cả các chuyển đổi trông thực sự đẹp và mượt mà. Đi tới phần hướng dẫn để tìm hiểu cách áp dụng các hiệu ứng này vào dự án của bạn. CSS Image Hover Effects (15 hiệu ứng)Một bộ sưu tập các hiệu ứng di chuột đơn giản như thu phóng, trượt, xoay, thang màu xám, mờ, độ mờ và các hiệu ứng cơ bản khác. Bạn có thể sử dụng các hiệu ứng này bằng cách thêm lớp CSS trước thẻ figure của mình. See the Pen Demo: CSS image hover effects by Naoya Direction-aware 3D hover effectĐây là một hiệu ứng di chuột siêu thú vị sẽ phát hiện chuyển động chuột cuối cùng của bạn. Chú thích hình ảnh sẽ mở từ một trong bốn hướng dựa trên vị trí con trỏ cuối cùng của bạn. See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado Tiles with Animated HoverMột cho thiết kế ô, cái này có tính năng thu phóng chậm, trang trình bày, cửa sổ bật lên, lớp phủ mờ trong số những cái khác. See the Pen Tiles with animated :hover by Christopher Grabiński SVG clip-Path Hover EffectHiệu ứng di chuột qua hình ảnh tiêu điểm tia x siêu tuyệt vời được hỗ trợ bởi SVG và CSS. Hoạt động tốt trên Chrome, Opera và Safari. |
