Giao diện popup component

Lập trình CSS và SASS nâng cao với dự án website Landing Page

5.0 (1 đánh giá)
Tạo bởi Nguyễn Minh Chí Cập nhật lần cuối 3 năm trước 7.438 lượt xem 0 bình luận
Tác giả/Dịch giả: Nguyễn Minh Chí
Học nhanh

Danh sách bài học

01. Code header của project Landingpage 2019 02. Tạo hình cho background image với CSS Clip-path 03. Tạo Button và hiệu ứng của nó cho Website Landing Page 2019 04. Tạo hiệu ứng zoom in, zoom out cho button khi hover 05. Hiệu ứng Animation cho Header website Landing Page 2019 06. Tổng quan cách hoạt động của CSS 07. Xử lý trùng lặp khi khai báo các Features hay Properties của CSS 08. Tìm hiểu quá trình xử lý cuối cùng của CSS 09. Chuyển px sang rem trong CSS 10. BEM và cách đặt tên Class cho element 11. Thực hành BEM vào project website Landing Page 12. Giới thiệu SASS 13. Tìm hiểu về Variables và Nesting trong SASS 14. Tìm hiểu về Mixins, functions, extends trong SASS 15. Set up môi trường để Compile SASS sang CSS 16. Áp dụng SASS vào project website landing page 17. Convert CSS code sang SASS và chia code thành các components 18. Code grid system trong dự án web landing page 19. Tạo text gradient và hiệu ứng hover cho text cho About Section trong web landing page 20. Hoàn thiện composition component và button-text cho About Section 21. Code Skills section cho website Landing Page 22. Tạo hiệu ứng Rotate cho Card Component trong Courses Section 23. Hoàn thiện các thuộc tính CSS Card Component trong Courses Section 24. Kết thúc quá trình code phần courses section 25. Bắt đầu code Testimonials Section trong dự án web landing page 26. Tạo hiệu ứng hover image và set video background cho testimonials section 27. Code HTML và CSS cho Enroll Section 28. Hoàn thiện CSS cho form Component 29. Code Footer Section 30. Giao diện popup component 31. Code hoàn thiện hiệu ứng cho pop up component 32. Code giao diện Navigation 33. Code hoàn thiện navigation _icon 34. Sử dụng Mixin tạo Media Query 35. Code responsive cho các Section 36. Code responsive image

Giao diện popup component

Dẫn nhập

Ở bài trước chúng ta đã cùng nhau Code xong phần Footer.

Trong bài học này chúng ta sẽ cùng nhau code phần Popup Component.


Nội dung

Để tiếp thu tốt bài học này các bạn cần:

Và trong bài học này chúng ta sẽ cùng nhau code:

  • Code html cho phần popup.
  • Code CSS cho popup component

Code html cho phần popup

Như các  phần trước thì chúng ta sẽ xem sản phẩm cuối cùng của phần này:

Code popup component, CSS, SASS

Ta có thể thấy popup chiếm toàn bộ màn hình với nền đen transparent, ở giữa là 1 element (.popup__content). Và trong phần này ta tiếp tục chia popup__content làm 2 phần. Phần bên tay trái là có 2 ảnh (popup__left chứa 2 popup__img), phần bên tay phải (.popup__right) có chứa nội dung gồm 3 phần. Phần 1 là popup title ta sẽ sử dụng .heading__secondary và 1 tiêu đề phụ ta sử dụng .heading__tertiary và nút đóng màn hình (.popup__close). Phần 2 là nội dung paragraph mô tả (.popup__text) và phần cuối chính là button sử dụng .btn--blue. 

(Phần này ta sẽ nhét code html xuống ngay dưới phần footer )


Code CSS cho Popup

Trước hết ta sẽ tạo ra file _popup.scss trong phần components, và import nó vào trong main.scss

Tiếp đến ta sẽ code để cho popup hiển thị toàn màn hình với background color là màu đen transparent và position absolute để nó và z-index thật lớn để chắc rằng khi hiển thị, nó luôn chèn đè lên tất cả những thứ còn lại.

(ta tạm thời để .popup__img bé lại để mình có thể dễ dàng minh họa)

Code popup component, CSS, SASS

Tiếp ta sẽ chình phần popup content. Ở đây đầu tiên là set width cho popup__content và chỉnh sao cho nó hiển thị ở giữa. Do có thẻ sẽ dùng nhiều nên mình để code chỉnh vị trí ở giữa sáng _mixins.scss

Và ta chỉ cần sử dụng nó lại trong _popup.scss

Code popup component, CSS, SASS

ta chỉnh thêm cho nó về background-color, height, và border-radius

Tiếp đến thì ta sẽ phải chia diện tích cho phần popup__leftpopup__right (ta set popup__img hiển thị display: block và có width là 100%)

Code popup component, CSS, SASS

Cách chúng ta nghĩ để 2 phần này hiển thị trên cùng 1 dòng là sử dụng float left, nhưng khi đó thì chiều cao của 2 phần sẽ không bằng nhau (bên trái chiếm toàn bộ chiều cao, còn bên phải chỉ chiếm vừa đủ để chứa text)

Code popup component, CSS, SASS

Nó sẽ khiến chúng ta khó căn chỉnh vị trí cho phần text, nên ở phần này mình sẽ giới thiệu cho các bạn 1 mẹo để căn chỉnh đó là sử dụng display: table-cell, nó sẽ giúp element hiển thị như 1 cột trong table (các cột sẽ hiển thị trên cùng 1 hàng, và có cùng chiều cao)  

Code popup component, CSS, SASS

Bây giờ thì nó đã hiển thị trên cùng 1 hàng và cùng 1 chiều cao, ta sử dụng vertical-align: middle để căn dọc phần text bên phải.

Code popup component, CSS, SASS

Tiếp tục chúng ta sẽ chỉnh đến popup__text 

Ở đây là có 1 số thuộc tính mới, column-count chính là số cột được chia, column-gap là khoảng cách giữa các cột, column-rule là vạch ngăn cách giữa các cột, còn hyphens dùng để khi có chữ quá dài mà chữ đó phải xuống dòng thì sẽ có gạch nối giữa 2 phần của dòng đó.

(cách bạn có thể chỉnh giá trị của các thuộc tính để hiểu rõ hơn nhé!)

Code popup component, CSS, SASS

Tiếp đến chúng ta sẽ chỉnh nốt phần popup__close. 

Phần này khá đơn giản chúng ta chỉ cần set position cho nó và chỉnh vị trí sao cho phù hợp.

Còn 1 vấn đề là mặc dù ta đã để border radius, nhưng do ảnh tràn ra ngoài mà border top left bottom left vẫn là góc vuông. ta chỉ cần đơn giản set over-flow cho content là hidden là xong :D

Vậy là chúng ta đã code xong phần CSS giao diện cho Popup component rồi nè.


Code CSS


Kết luận

Ở bài này chúng ta đã code xong giao diện cho phần Popup

Ở trong bài sau chúng ta sẽ hoàn thành hiệu ứng khi click vào button phần courses section thì popup mới hiện lên và hiệu ứng đóng popup.

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 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 Giao diện popup component 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 likeshare để ủng hộ Kteam và tác giả nhé!

Project

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!


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ê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ác giả/Dịch giả

Khóa học

Lập trình CSS và SASS nâng cao với dự án website Landing Page

Qua khóa FRONT END CƠ BẢN , Kteam đã hướng dẫn các bạn đã có được những kiến thức cơ bản về  HTML và CSS.

Trong combo Front End 2019, chúng ta sẽ cùng nhau tìm hiểu và áp dụng những kiến thức chuyên sâu về CSS. Do kiến thức về CSS trong khóa học khá lớn và chi tiết nên Kteam đã chia làm 2 phần.

  • Phần 1: CSS và SASS Nâng Cao
  • Phần 2: Flexbox và CSS grid layouts

Ở khóa học này chúng ta sẽ cũng nhau tìm hiểu tổng quát về phần 1: CSS và SASS Nâng Cao với dự án Website Landing Page.

Bạn cũng có thể truy cập vào đường link bên dưới để xem bản PRIEVIEW của website landing page Selftaught 2019 mà chúng ta sẽ cùng thực hiện nhé! 

LANDING PAGE WEBSITE SELFTAUGHT 2019

Đánh giá

5.0
1 đánh giá
Đánh giá
5
1
4
3
2
1
Phạm Tấn Thành Moderator đã đánh giá 5 năm trước

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.