Hướng dẫn css cho header

Question

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é!

Nội dung chính Show

Tạo Cấu Trúc Header HTML
Thiết Lập Các Component Cho Header
Thiết Lập Style CSS Cho Header
Thiết Lập Style CSS Cho Nội Dung
Tạo Animation Cho Nội Dung Bằng HTML CSS
Thiết Kế Button Cho Header

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


 
 
     
     
     
     Thực hành tạo header website

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é!


    
       
         Du Lịch
         Đi đâu không quan trọng, quan trọng là được đi cùng nhau.
       
       Khám Phá Ngay

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:

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é!

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:

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ẻ!

programming css Header HTML CSS Header CSS

Hướng dẫn css cho header

Tạo Cấu Trúc Header HTML

HTML

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

Thiết Lập Style CSS Cho Header

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

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

Thiết Kế Button Cho Header

Tổng kết:

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội