Tạo hình cho background image với CSS Clip-path

Dẫn nhập

Ở bài trước chúng ta đã cùng nhau TẠO HEADER CƠ BẢN CHO PROJECT LANDING PAGE, với heading text, background gradient, logo

Trong bài học này chúng ta sẽ tìm hiểu về CSS Clip-path và sử dụng nó để tạo hình cho background-image.

Nội dung

Để có thể tiếp tục theo dõi bài học này bạn cần:

• Nắm vững HTML và CSS cơ bản
• Đã học qua bài TẠO HEADER CƠ BẢN CHO PROJECT LANDING PAGE

Trong bài học này chúng ta sẽ tìm hiểu:

• Giới thiệu về clip-path
• Dùng clip-path cho web landing page

Giới thiệu về clip-path

Chúng ta sẽ bắt đầu tìm hiểu bằng cách sử dụng trang web Clip-path maker. Đây là giao diện của trang web:

Bức ảnh ở giữa trang web là tượng trưng cho ảnh background. Chú ý tọa độ các điểm gồm 2 thông số là x và y với gốc tọa độ là góc trái màn hình.

Bạn hoàn toàn có thể thay 60% bằng 120px, 100px vì đơn giản nó chỉ là tọa độ

Đến đây ta thử áp dụng hình tam giác và tứ giác bất kì vào background web landing page.

• Tam giác

header{
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

1
2
3
4
5

• Tứ giác

header{
    clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
}
1
2
3
4

Để chỉnh các góc của hình và tạo ra các hình dạng background khác nhau các bạn có thể chỉnh sửa trong Clip-path maker rồi copy code CSS bên dưới là được.

Dùng clip-path cho web landing page

Trong web landing page của chúng ta, mình sử dụng hình ELLIPSE:

Bằng cách chỉnh vị trí của tâm ta sẽ được hình ảnh background mong muốn.

header{
    clip-path: ellipse(60% 60% at 50% 33%);
}
1
2
3
4

Chú ý: các bạn có thể để ý là phần code trong web Clip-path maker, có 2 dòng code CSS:

Ví dụ:

-webkit-clip-path: ellipse(37% 32% at 49% 50%);
    clip-path: ellipse(60% 60% at 50% 33%);
1
2
3

Ở đây là do thuộc tính clip-path không phải luôn hỗ trợ các browser như google chrome, safari, opera nên cần thêm prefix “-webkit-“ để đảm bảo việc clip-path vẫn hoạt động trên các browser này.

Việc trên sẽ được nói rõ trong bài TESTING BROWSER SUPPORTS trong khóa học này.

Kết luận

Trong bài học này chúng ta đã cùng nhau tìm hiểu về CSS CLIP-PATH và ứng dụng tạo hình background image.

Ở bài học sau chúng ta sẽ bắt tay vào CODE BUTTON cũng như animation của nó trong phần Header.

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 Tạo hình cho background image với CSS Clip-path 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é!

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Ì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