Hướng dẫn tạo hình bằng css
Đã đăng vào thg 6 21, 2019 4:28 CH 5 phút đọc Với CSS3 chúng ta có thể tạo ra các hình dạng thú vị mà không hề khó khăn. Vậy có bao nhiêu có cách khác nhau để tạo hình? Trong bài viết này mình xin trình bày một số cách phổ biến nhất để tạo ra hình tròn, hình tam giác, hình đa giác.. cũng như ưu nhược điểm của các phương pháp này. Dưới đây là một số cách tạo hình cho trang web: border-radiusSử dụng thuộc tính
Bạn có thể sử dụng bất kỳ giá trị độ dài nào cho bán kính đường tròn. Với các giá trị độ dài khác nhau, ta sẽ thu được các hình khác nhau:
Ưu điểm:
Mọi người có thể tìm
hiểu thêm các option với css borderChúng ta cũng có thể tạo ra một số hình dạng khác nhau với thuộc tính
Ưu điểm
Rotate transformVới một số hình đặc trưng như kim cương, ta có thể sử dụng thuộc tính
Ta có thể thay đổi vị trí của khối bằng
thuộc tính
Ưu điểm
Nhược điểm
pseudo element
Bằng cách sử dụng Ưu điểm
Nhược điểm Trong các dự án lớn, với một số hình dạng phức tạp, ta nên sử dụng một cách phù hợp để tránh gây phức tạp, nhầm lẫn. box-shadowĐây là cách kỳ lạ nhất để tạo hình dạng bằng css. Với thuộc tính này ta có thể tạo ra các hình dạng đáng kinh ngạc.
Ưu điểm
Nhược điểm
clip-pathChúng ta có thể sử dụng các hàm với
Ưu điểm
Nhược điểm
SVG
Tham khảo thêm tại đây. Ưu điểm
Nhược điểm
canvas
Ưu điểm
Nhược điểm
Tổng kếtKhông có kỹ thuật nào là hoàn hảo, với từng trường hợp ta nên lựa chọn kỹ thuật cho phù hợp, để tránh gây ra sự phức tạp và khó khăn cho việc tạo hình. Nguồn tham khảohttps://css-tricks.com/working-with-shapes-in-web-design/ All rights reserved |