Coding header Web Landing Page - Phần 2

Dẫn nhập

Ở bài học trước chúng ta đã bắt tay vào CODE HEADER của Web Landing Page.

Trong bài học này chúng ta sẽ tiếp tục code tiếp phần header này

Nội dung

Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung: 

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS
• SET UP FILE HTML & CSS
• CODING HEADER – PHẦN 1

Trong bài này, Kteam sẽ cùng bạn tìm hiểu các nội dung: 

• Tạo hiệu ứng background gradient.
• Code CSS

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

Tạo hiệu ứng background gradient

CSS cho phép chúng ta hiển thị hiệu ứng chuyển tiếp màu (gradient) thay đổi một cách mượt mà từ màu này sang màu khác theo chỉ định mong muốn. Để tạo một gradient cơ bản bạn phải xác định được ít nhất hai màu hiển thị để có thể chuyển tiếp và hướng (hoặc góc) chuyển màu.

Có 2 kiểu thuộc tính background gradient:

• Linear Gradients: phân bố màu theo chiều thẳng xuống, lên, trái, phải, chéo. 
• Radial Gradients: phân bố màu theo các hướng xuyên tâm hình elip,

Background Linear-gradient

Cú pháp

background-image: linear-gradient (<hướng/ góc chuyển tiếp>, <màu 1>,<màu 2>, ...<màu n>),

url(<link ảnh nền>);

Trong đó: 

<hướng/góc chuyển tiếp>: là hướng/góc chuyển tiếp từ màu này sang màu khác theo thứ tự màu quy định. Gồm: 

• Top to Bottom: hướng chuyển tiếp màu từ trên xuống. Là hướng mặc định của gradient.
• Left to Right: hướng chuyển tiếp màu từ trái sang phải.
• Đường chéo: hướng chuyển tiếp màu theo chiều ngang rồi tới chiều dọc (to top left, to bottom right,….).
• Góc: thay vì các hướng được xác định trước, bạn có thể quy định góc chuyển tiếp một cách chính xác để kiểm soát tốt hơn về hướng chuyển tiếp của màu so với phương pháp đường chéo.

Áp dụng

Ví dụ: Thêm vào file Style.css đoạn code sau:

background-image: linear-gradient(45deg,rgba(2,33,64, 0.8) 55%,rgba(45,95,93,0.85)), url("../img/background4.jpeg");
1

Kết quả: 

Lưu ý: 

• Trong ví dụ trên bạn có thể thấy Kteam sử dụng hệ màu rgba() nhằm xác định màu sắc qua thông số rgb và tham số độ trong suốt a có khoảng giá trị từ 0 đến 1.(0 biểu thị độ trong suốt hoàn toàn, 1 biểu thị độ hiển thị màu hoàn toàn).
• Ngoài thông số màu, ta còn có tham số % bên cạnh màu chỉnh định. Tham số này nhằm xác định % độ phủ không gian mà màu đó chiếm trên toàn bộ gradient.

Background Radial Gradients

Cú pháp: 

background-image: radial-gradient (<hình dạng>  <kích thước> at <vị trí>, <màu 1>,<màu 2>, ...<màu n>)

url(<link ảnh nền>);

Trong đó: 

<hình dạng>: mặc định là hình elip, có thể sử dụng hình tròn (circle)

<kích thước> : xác định kích thước của gradient, gồm 4 giá trị tương ứng:

• farthest-corner (mặc định)
• closest-side
• closest-corner
• farthest-side

<vị trí>: vị trí đặt tâm của gradient, mặc định là trung tâm (center) của nền. Vị trí nhận giá trị left, right, top,… hoặc giá trị %. 

Áp dụng

Ví dụ: Thêm vào file Style.css đoạn code sau:

background-image: radial-gradient(circle farthest-side at 20% 60% ,rgba(228, 11, 29,0.9),rgba(2,33,64, 0.8) 30%), url("../img/background4.jpeg");
1

Kết quả: 

Lưu ý:

Trong ví dụ trên tại thuộc tính <vị trí> có 2 giá trị tương ứng vị trí được xác định bởi % theo chiều ngang và % theo chiều dọc.

Nhằm tránh gây nhầm lẫn về các hiệu ứng sử dụng trong website Landing Page mà chúng ta đang thực hiện, Kteam sẽ không đề cập quá kỹ về phần Radial Gradient & cách sử dụng.Tuy nhiên, bạn hoàn toàn có thể tham khảo thêm về CSS Gradient trong đường link bên dưới để hiểu hơn về nó.

CSS Gradients

Code CSS

header{
  background-image: linear-gradient(45deg,rgba(2,33,64, 0.8) 55%,rgba(45,95,93,0.85)), url("../img/background4.jpeg");
  background-size: cover;
  background-position: center;
  height: 100vh;
  /* view height */
  background-attachment: fixed;
}

.logo{
  width: 350px;
  float: left;
  margin-left: 70px;
  margin-top: -50px;
}

.main-nav{
  float: right;
  list-style: none;
  margin-right: 50px;
  margin-top: 55px;
}

.main-nav li{
  display: inline-block;
  margin-right: 30px;
}

.main-nav li a{
  text-decoration: none;
  color: white;
  font-size: 110%;
  font-weight: 700;
  transition: border-bottom 0.5s;
  padding: 3px 0;
}

.main-nav li a:hover,
.main-nav li a:active{
  border-bottom: 2px solid #cccccc;
}

.clearfix::after{
  content: " ";
  display: table;
  clear: both;
}

.row{
  width: 1140px;
  margin: 0 auto;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

Kết luận

Ở bài học này chúng ta đã đi tiếp với 1 số thuộc tính của phần Header.

Trong bài sau chúng ta sẽ cùng nhau HOÀN THIỆN HEADER này.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Coding header Web Landing Page - Phần 2 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Coding header Web Landing Page - Phần 2 dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK