Thế giới càng ngày càng phát triển, vì thế công nghệ cũng không mãi đứng yên một chỗ. Trong đó có thể kể tới Web Development Technology, đặc biệt hơn là về CSS. Trong bài viết này mình sẽ giới thiệu cho mọi người về một số thuộc tính CSS đặc biệt mà có thể bạn chưa biết.
1. backface-visibility:
Thuộc tính xác định xem mặt sau của một phần tử có nên hiển thị với người dùng hay không.
Demo:
https://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility
2. background-blend-mode:
Chỉ định các chế độ trộn của lớp nền
Demo:
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-blend-mode
https://codepen.io/gregh/pen/xgxqWz
3. background-clip:
Thuộc tính background-clip xác định khoảng cách nền (màu hoặc hình ảnh) sẽ kéo dài trong một phần tử.
Demo:
https://www.w3schools.com/cssref/css3_pr_background-clip.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-clip
https://codepen.io/gregh/pen/dNyWRP
4. box-decoration-break:
Thuộc tính này chỉ định background, padding, border, box-shadow, margin, và clip của phần tử được áp dụng khi nó được bọc trên nhiều dòng.
Demo:
https://www.w3schools.com/cssref/css3_pr_box-decoration-break.asp
https://codepen.io/trongcong/pen/yLzQpGw
5. calc():
Hàm calc() thực hiện một phép tính được sử dụng làm giá trị thuộc tính.
Demo:
https://www.w3schools.com/cssref/func_calc.asp
6. column-count:
Thuộc tính column-count xác định số lượng cột mà một phần tử có.
Demo:
https://www.w3schools.com/cssref/css3_pr_column-count.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_column-count
7. counters:
Counters cho phép đưa ra số (chỉ mục) cho các phần tử. Ví dụ: bạn có một bài viết, với một số chủ đề, mỗi chủ đề có tiêu đề <h2> ở đầu và bạn có <h3> tiêu đề phụ. Bạn có thể tự động đánh số chúng!
Demo:
https://www.w3schools.com/css/css_counters.asp
https://codepen.io/gregh/pen/MJWRXm
8. currentColor:
Từ khóa currentColor đại diện cho giá trị của thuộc tính màu của các phần tử.
Demo:
https://www.w3schools.com/colors/colors_currentcolor.asp
https://codepen.io/trongcong/pen/yZLxLo
9. filter:
Thuộc tính filter xác định các hiệu ứng hình ảnh (như mờ và bão hòa) cho một phần tử (thường là <img>).
Demo:
https://www.w3schools.com/cssref/css3_pr_filter.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=none
10. font-smoothing:
Thuộc tính font-smoothing kiểm soát cách khử răng cưa được áp dụng cho phông chữ.
Demo:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
https://codepen.io/gregh/pen/PWwoVd
11. list-style-image:
Thay thế điểm đánh dấu mục danh sách bằng một hình ảnh
Demo:
https://www.w3schools.com/cssref/pr_list-style-image.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_list-style-image&preval=none
12. object-fit:
Nó giống như thuộc tính background-size vậy nhưng có điều đặc biệt hơn là thuộc tính object-fit được sử dụng cho phần tử hình ảnh.
Demo:
https://www.w3schools.com/css/css3_object-fit.asp
https://codepen.io/gregh/pen/RKNWNp
13. order:
Thuộc tính order chỉ định các mục trong một flex container
Demo: https://www.w3schools.com/cssref/css3_pr_order.asp
14. resize:
Thuộc tính resize xác định liệu phần tử có thể được thay đổi kích thước bởi người dùng
Demo: https://www.w3schools.com/cssref/css3_pr_resize.asp
15. shape-outside:
Cái này mình cũng không biết giải thích sao, các bạn có thể xem demo bên dưới để hiểu rõ hơn về cách hoạt động của nó.
Demo: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
16. var():
Hàm var() được sử dụng để chèn giá trị của một biến CSS
Demo: https://www.w3schools.com/css/css3_variables.asp
17. writing-mode:
Thuộc tính chế độ viết chỉ định các dòng văn bản được bố trí theo chiều ngang hay chiều dọc.
Demo: https://www.w3schools.com/cssref/css3_pr_writing-mode.asp
18. clip-path:
Thuộc tính clip-path cho phép bạn tạo các hình dạng phức tạp trong CSS bằng cách cắt một phần tử thành hình dạng cơ bản.
Demo: https://bennettfeely.com/clippy/
19. attr():
Hàm attr() trả về giá trị của một thuộc tính của các phần tử đã chọn
Demo: https://www.w3schools.com/cssref/func_attr.asp
20. mask-image:
Thuộc tính mask-image chỉ định một hình ảnh được sử dụng làm lớp mặt nạ cho một phần tử.
Demo:
https://www.w3schools.com/cssref/css3_pr_mask-image.asp
https://antero-landing.vercel.app/
21. cursor
Ngoài ra có thược tính cursor cũng rất thú vị, bạn có thể tham khảo link bên dưới.
Demo: https://www.w3schools.com/cssref/pr_class_cursor.asp
Bạn có thể tham khảo thêm 50 thuộc tính CSS thú vị khác tại đây.