CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết

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.

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block Gutenberg Block Attributes

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.