Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Tạo Hiệu Ứng Hover CSS Đẹp Mắt Với Izmir

Tạo Hiệu Ứng Hover CSS Đẹp Mắt Với Izmir


Ngày 9 Tháng 10 Năm 2020

Tạo Hiệu Ứng Hover Đẹp Mắt Với Izmir

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng hover cho trang web bằng việc kết hợp thư viện Izmir với HTML CSS nhé!

Giới Thiệu Về Thư Viện Izmir

Izmir là một thư viện CSS nhỏ gọn. Nó giúp bạn có thể nhanh chóng tạo ra các hiệu ứng hover đẹp mắt cho phần tử trong trang web bằng cách thêm class của hiệu ứng hover vào trong thẻ HTML. Và điểm mình cảm thấy thích nhất ở nó là dễ dàng tinh chỉnh cũng như có thể áp dụng cho nhiều loại dự án web khác nhau.

Để sử dụng trực tiếp cho trang HTML thì bạn chỉ cần thêm CDN của thư viện ở bên dưới:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ciar4n/[email protected]/izmir.min.css">

Tạo Hiệu Ứng Hover Cơ Bản Bằng Thư Viện Izmir

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với thư viện Izmir và Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tạo Hiệu Ứng Hover Với Thư Viện Izmir</title>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,[email protected],400;1,600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ciar4n/[email protected]/izmir.min.css">
     <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Bước tiếp theo chúng ta sẽ tạo cấu trúc phần tử HTML được hover bằng thẻ figurefigcaption thông qua đoạn mã bên dưới nhé:

HTML

<h2>Hiệu Ứng Hover Cơ Bản Bằng Thư Viện Izmir</h2>
<div class="container">
  <figure class="c4-izmir">
    <img src="https://images.pexels.com/photos/1632790/pexels-photo-1632790.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400"
         alt="Hình Ảnh Minh Họa">
    <figcaption>
      <h3>
        Niềm Vui Lập Trình
      </h3>
    </figcaption>
  </figure>
</div>

Chúng ta sử dụng class c4-izmir để khởi tạo hiệu ứng hover cơ bản của thư viện. Hiệu ứng này sẽ hiển thị nội dung trong ô figcaption khi người dùng hover vào ảnh. Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản để thiết lập vị trí cũng như font chữ cho nó thông qua đoạn mã sau nhé:

CSS

body{
  font-family: 'Open Sans', sans-serif;
}
h2{
  text-align:center;
  text-shadow: 0px 10px 10px #234D3C;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

Và kết quả cuối cùng bạn xem Code ở dưới nhé:

See the Pen Hiệu Ứng Hover Cơ Bản Bằng Thư Viện Izmir by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tạo Hiệu Ứng Hover Với Border Bằng Thư Viện Izmir

Trong phần này chúng ta sẽ đi vào tạo hiệu ứng hover chuyển động cho border bằng thư viện này nha. Mình có một lưu ý là tất cả đoạn mã phía trên đều giống nhau nên mình sẽ không viết lại. Nó chỉ có một điểm khác biệt là chúng ta sẽ thêm class c4-border-cc-1 vào trong thẻ figure như ở bên dưới đây:
<figure class="c4-izmir c4-border-cc-1">.

Để hiểu rõ hơn bạn cùng xem kết quả cũng như đoạn HTML, CSS trên Codepen nhé:

See the Pen Hiệu Ứng Hover Animation Border Bằng Thư Viện Izmir by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn xem nhiều hiệu ứng chuyển động border khác của thư viện thì có thể truy cập ở đây nhé!

Tạo Hiệu Ứng Hover Với Image Animation Bằng Thư Viện Izmir

Cũng giống như ở trên để tạo hiệu ứng với hình ảnh thì bạn chỉ cần lựa chọn tên class hiệu ứng hover image animation trong thư viện và gán như sau:

<figure class="c4-izmir c4-image-rotate-right">

Để dễ hình dung bạn xem kết quả hiệu ứng image animation với class c4-image-rotate-right ở Codepen bên dưới nhé:

See the Pen Hiệu Ứng Hover Animation Image Bằng Thư Viện Izmir by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn xem nhiều hiệu ứng chuyển động image khác của thư viện thì có thể truy cập ở đây nhé!

Tạo Hiệu Ứng Hover Với Caption Layout Bằng Thư Viện Izmir

Với các ví dụ trên khi bạn hover vào hình ảnh thì đoạn caption sẽ hiển thị chính giữa của hình ảnh. Để thiết lập vị trí caption trong thư viện này thì bạn có thể sử dụng class c4-layout-center-right (nằm ở chính giữa bên phải), c4-layout-bottom-left (nằm ở dưới cùng bên trái)... Và cách thiết lập của nó sẽ như sau:

<figcaption class="c4-layout-bottom-left">

Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Hiệu Ứng Hover Caption Layout Bằng Thư Viện Izmir by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn xem nhiều hiệu ứng chuyển động image khác của thư viện thì có thể truy cập ở đây nhé!

Cách Tỉnh Chỉnh Hiệu Ứng Hover Với Thư Viện Izmir

Đôi khi trong dự án thực tế thì bạn sẽ cần thay đổi một số thuộc tính như là màu sắc, color , background hover... Vậy để tinh chỉnh như mong muốn thì bạn có thể dùng CSS để thiết lập lại thuộc tính cho class .c4-izmir như đoạn mã sau đây nhé:

CSS

.c4-izmir {
  --primary-color: #F6CD14;
  --secondary-color: #D0206E;
  --transition-duration: 500ms;
  --border-width: 6px;
  --overlay-opacity: .5;
}

Và kết quả bạn xem bên dưới nhé:

See the Pen Tinh Chỉnh Hiệu Ứng Hover Thư Viện Izmir by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn xem nhiều hiệu ứng hover khác của thư viện thì có thể truy cập ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo hover blur link hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!