Tạo menu mờ với HTML và CSS

DEMO

Menu là phần cốt yếu của bất cứ trang web nào. Ngay từ lần ghé thăm đầu tiên, thì một menu đẹp sẽ đem lại ấn tượng tốt đến người dùng, giúp họ dễ dàng nhận ra trang web của bạn.

Hôm nay, freetuts sẽ hướng dẫn các bạn cách tạo một menu mờ như hình bên dưới

1. Phần HTML

Việc tạo bố cục khá đơn giản, với thẻ div chính và cặp thẻ ulli . Có thể nói cặp thẻ ulli là sự kết hợp kinh điển trong quá trình làm web menu.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="menu1.css">
  <script src="main.js"></script>
</head>
<body>
  <div>
    <ul>
      <li>Home</li>
      <li>News</li>
      <li>About Us</li>
      <li>Blog</li>
      <li>Product</li>
      <li>Contact</li>
    </ul>
  </div>
</body>
</html>

Lưu ý nên tạo một thẻ div chính, còn liệt kê danh sách thì đưa vào thẻ ulli .

Ngoài ra, nếu các bạn muốn chuyển tiếp đến đường dẫn khác thì có thể đặt thẻ a trong thẻ li .

2. Phần CSS

Trước hãy lướt qua toàn bộ mã nguồn

div {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  position: relative;
  padding: 0;
  list-style: none;
  background-color: transparent;
}

ul:hover li {
  filter: blur(10px);
}

li {
  text-align: center;
  width: fit-content;
  display: inline-block;
  transition: 0.5s ease;
  padding: 20px;
  text-transform: uppercase;
}

ul li:hover {
  font-size: 32px;
  animation: bg 1s ease-in-out forwards;
  border-radius: 10px;
  filter: blur(0);
  cursor: pointer;
}

@keyframes bg {
  0% {
    background-color: transparent;
    color: black;
  }
  100% {
    background-color: darkcyan;
    color: whitesmoke;
  }
}

Bước 1: tạo định dạng cho thẻ div

div {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Bước 2: tạo định dạng cho thẻ ul

ul {
  position: relative;
  padding: 0;
  list-style: none;
  background-color: transparent;
}

Đối với thẻ ul chúng ta sẽ phải loại bỏ kiểu mặc định bằng cách thiết lập giá trị list-style: none . Do menu theo hướng chiều ngang nên kiểu mặc định này là không cần thiết.

Thẻ ul sẽ có giá trị padding mặc định do đó cần thiết lập về 0 hoặc một giá trị khác mà bạn mong muốn, trong bài viết này freetuts tạm loại bỏ hết các padding.

Bước 3: tạo định dạng cho thẻ li

li {
  text-align: center;
  width: fit-content;
  display: inline-block;
  transition: 0.5s ease;
  padding: 20px;
  text-transform: uppercase;
}

Để các danh sách nằm trên một hàng thì thuộc tính display: inline-block được thiết lập.

Các thuộc tính mang tính trang trí văn bản text-align text-transform cũng được thêm vào.

Bước 4: tạo định dạng hover

ul:hover li {
  filter: blur(10px);
}

ul li:hover {
  font-size: 32px;
  animation: bg 1s ease-in-out forwards;
  border-radius: 10px;
  filter: blur(0);
  cursor: pointer;
}

Phần trọng tâm trong bước hover này là thuộc tính filter: blur(value) . Những thẻ li nào không hover sẽ bị làm mờ đi và ngược lại sẽ thể hiện rõ nét là font-size to hơn.

Lưu ý: cursor: pointer giúp thân thiện hơn với người dùng qua việc chuyển con trỏ bình thường sang dạng pointer.

Trong thuộc tính animation giá trị forwards được thiết lập nhằm mục đích lưu trạng thái cuối cùng của hiệu ứng cho thẻ li tương ứng.

Vậy điều quan trọng trong bước này là cách đặt hover như thế nào cho đúng để hiệu ứng chạy hoàn hảo nhất.

Phần animation bg sẽ được đề cập ở bước kế tiếp.

Bước 5: tạo animation

@keyframes bg {
  0% {
    background-color: transparent;
    color: black;
  }
  100% {
    background-color: darkcyan;
    color: whitesmoke;
  }
}

Sẽ có hai thuộc tính được dùng: background-colorcolor để tăng tính tương tác. Ngoài ra, bạn có thể thêm vào các giá trị phần trăm khác để giúp chuyển động được mượt mà hơn.

3. Lời Kết

Qua bài viết này, bạn đã học được cách tạo được một menu mờ với hiệu ứng đẹp. Các bạn có thể chọn các màu sắc khác, font chữ đẹp hơn hoặc kích cỡ chữ to hơn để tạo ấn tượng mạnh hơn nữa. Freetuts hy vọng nó sẽ giúp ích cho việc làm đẹp trang web của bạn.

Cảm ơn mọi người, hẹn gặp lại trong bài viết kế tiếp.

-------------------#####-------------------

Khóa học nên xem

Nguồn: freetuts.net