ạo menu mờ với HTML và CSS - Học CSS3 căn bản & nâng cao
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, Zaidap.com sẽ hướng dẫn các bạn cách tạo một menu mờ như hình bên dưới ...
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, Zaidap.com 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ẻ ul và li . Có thể nói cặp thẻ ul và li 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ẻ ul là li .
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 Zaidap.com 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 và 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-color và color để 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. Zaidap.com 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.
Chuyên đề học lập trình web: Học phần HTML / CSS
Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.
Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đê tại đây.
