Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Header Cho Website Bằng HTML CSS

Cách Tạo Header Cho Website Bằng HTML CSS


Ngày 28 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo dự án header template bằng HTML CSS cho website nhé!

Tạo Cấu Trúc Header HTML

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 Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thực hành tạo header website</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Thiết Lập Các Component Cho Header

Trong phần này chúng ta sẽ đi vào tạo các thành phần HTML mà một header website cần có thông qua đoạn mã bên dưới nhé!

<header>
  <div class="header">
    <div class="logo">
      <img src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/thu-hanh-tao-website/Niem_Vui_Lap_Trinh-removebg-preview.png"         alt="Logo của website">
    </div>
    <div class="container">
      <h1 class="heading">
        <span class="heading-title">Du Lịch</span>
        <span class="heading-sub">Đi đâu không quan trọng, quan trọng là được đi cùng nhau.</span>
      </h1>
      <a href="#" class="btn btn-white">Khám Phá Ngay</a>
    </div>
  </div>
</header>

Thiết Lập Style CSS Cho Header

Phần tiếp theo chúng ta sẽ đi vào thiết lập các thuộc tính CSS cho các thẻ body, header... Để hiểu rõ hơn bạn hãy xem đoạn code dưới đây nhé!

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #777;
    padding: 70px;
}00.header{
    height: 95vh;
    background-image: linear-gradient(to right bottom ,rgba(126, 213, 111, 0.6), rgba(40,180,131,0.6)) ,
 url("https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/thu-hanh-tao-website/du-an-web.jpg");
    background-size: cover;
    background-position: bottom;
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
    position: relative;
}

Ở đây mình có sử dụng thuộc tính linear-gradient kết hợp màu sắc với image để giúp background trông thu hút và bắt mắt hơn. Nếu bạn cảm thấy khó hiểu thì hãy nhìn ảnh minh hoạ bên dưới nha:

Gradient Image CSS

Nếu bạn muốn tìm hiểu thêm các loại gradient khác cho website thì truy cập ở đây nha. Còn bây giờ chúng ta sẽ đi vào xem hình ảnh kết quả của đoạn mã trên nhé!

Header Teamplate 1

Như bạn thấy mình đã sử dụng thuộc tính clip-path để tạo đường viền nghiêng cho header. Và nếu như bạn muốn sử dụng thuộc tính này để tạo nhiều hình dạng khác (hình thang, hình mũi tên, hình tròn...) cho đối tượng trong website thì hãy dùng công cụ clippy nhé.

Thiết Lập Style CSS Cho Nội Dung

Trong phần này chúng ta sẽ đi vào thiết kế lại nội dung trong header cho nó bắt mắt và thu hút hơn thông qua đoạn code sau nhé!

.logo img{
    height: 100px;
}
.container{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.heading{
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 60px;
}
.heading-title{
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 33px;
    animation-name: hieu-ung-di-chuyen-sang-trai;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}
.heading-sub{
    display: block;
    font-size: 20px;
    letter-spacing: 12px;
    animation-name: hieu-ung-di-chuyen-sang-phai;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

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

Header Teamplate 1

Tạo Animation Cho Nội Dung Bằng HTML CSS

Trong phần tiếp theo, chúng ta sẽ đi vào tạo hiệu ứng chuyển động cho nội dung trong header bằng thuộc tính @keyframes nha.

@keyframes hieu-ung-di-chuyen-sang-trai{
    0%{
        opacity: 0;
        transform: translateX(-100px);
    }
    80%{
        transform: translateX(15px);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes hieu-ung-di-chuyen-sang-phai{
    0%{
        opacity: 0;
        transform: translateX(100px);
    }
    80%{
        transform: translateX(-15px);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}

Và kết quả bạn xem video bên dưới nha!

Thiết Kế Button Cho Header

Phần cuối cùng này này chúng ta sẽ đi vào đi vào thiết kế và tạo hiệu ứng cho button bằng các thuộc tính CSS ở đoạn code dưới đây nhé!

.btn:link,
.btn-visited{
    text-decoration: none;
    padding: 15px 40px;
    display:inline-block;
    border-radius: 100px;
    transition: all .2s;
    position: relative;
}
.btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.btn:active{
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.btn-white{
    background-color: #fff;
    color: #777;
}

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

Còn dưới đây là dự án trên Codepen nha!

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tìm hiểu nhiều thiết kế header khác cho website 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 kiến thức hữu ích về cách tạo header website trong 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ẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.