Coding About Section - Phần 2

Dẫn nhập

Ở những bài trước, chúng ta hoàn thành phần CODING ABOUT SECTION CHO WEB LANDINGPAGE - PHẦN 1 .

Trong bài học này chúng ta sẽ cùng nhau hoàn thiện phần About Section trong Web Landing Page.

---

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
• CODING HEADER – PHẦN 2
• CODING HEADER – PHẦN 3
• CODING ABOUT SECTION CHO WEB LANDINGPAGE - PHẦN 1

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

• Cú pháp dùng thuộc tính filter và box-shadow trong CSS
• 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ả.

---

Cú pháp dùng thuộc tính filter và box-shadow trong CSS

Cú pháp filter:

Element{

     filter: brightness (a%) blur (bpx);  

Ví dụ:

filter: brightness(55%) blur(2px);

Cú pháp box-shadow (tạo bóng cho element)

box-shadow: x   y   độ_mờ   độ_phóng_to   màu_bóng;

Ví dụ: 

box-shadow: 0px 5px 15px 5px #265077 ;

---

Code CSS

.about-picture{
  position: relative;
  margin-top: 50px;
}
.about-picture img{
  width: 90%;
  border-radius: 20px;
  border: 4px solid #c2e1fd;
  box-shadow: 0px 5px 15px 5px #265077 ;
  transition: all .7;
  /* x-y-độ mờ-đọ phóng rộng-màu */
  /* filter: brightness(55%) blur(2px); */
}
 
.picture-title{
  position: absolute;
  top: 50%;
  left: 50%;
  color: #c2e1fd;
  transform: translate(-65%,100%);
  opacity: 0;
  transition: all .7s;
}
 
.about-picture:hover img,
.about-picture:active img{
  filter: brightness(55%) blur(2px); 
}
 
.about-picture:hover .picture-title,
.about-picture:active .picture-title{
  transform: translate(-65%, -50%);
  opacity: 1;
}

---

Kết luận

Ở bài học này chúng ta đã hoàn thiện xong phần About Section.

Ở bài học sau chúng ta sẽ cùng đi tiếp vào phần PRODUCTS SECTION.

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ó". 

---

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.