Bài hôm nay chúng ta sẽ đi vào những cách để có thể ẩn một đối tượng nào đó trong trang web bằng CSS để thực hiện các hiệu ứng animation, hiệu ứng hover… Nào hãy cùng mình đi vào tìm hiểu nhé!
Tóm Tắt
Sử Dụng Thuộc Tính display CSS
Thuộc tính display trong CSS có nhiệm vụ là xác định cách mà đối tượng HTML được hiển thị trong trang web và được chia thành các thuộc tính chính sau đây:
display: inline: Hiển thị phần tử dưới dạng inline(như là thẻspan).display: inline-block: Hiển thị dưới dạng block nhưng cùng nằm trên một dòng.display: block: Hiển thị dưới dạng block (như là thẻp).display: none;: Phần Tử sẽ bị ẩn hoàn toàn.
Trong ví dụ dưới đây chúng ta sẽ sử dụng thuộc tính display: none; để ẩn đối tượng nhé:
See the Pen Su Dung Display: None Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Ở đây mình có lưu ý là khi chúng ta sử dụng thuộc tính này thì nó sẽ loại bỏ phần tử khỏi trang nên bạn có thể thấy là khoảng cách giữa hai ô một và ba sẽ tự động được thu hẹp lại. (Nhưng trên DOM vẫn có nhé). Khi bạn xem các thuộc tính ẩn khác sẽ hiểu hơn nhé!
Sử Dụng Thuộc Tính opacity CSS
Thuộc tính opacity giúp chúng ta xác định độ mờ cho đối tượng HTML với CSS. Với giá trị của nó sẽ bắt đầu từ 0 đến 1. Càng lên cao thì nó sẽ được hiển thị càng rõ. Bây giờ chúng ta sẽ đi vào sử dụng opacity:0 để ẩn đối tượng nhé:
See the Pen Sử Dụng Thuộc Tính opacity CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Như bạn thấy thì nó sẽ khác với cách chúng ta sử dụng thuộc tính display: none; ở chỗ là khoảng cách đối tượng bị ẩn vẫn được giữ (do chúng ta chỉ làm trong suốt đối tượng thôi).
Sử Dụng Thuộc Tính clip-path CSS
Thuộc tính clip-path cho phép bạn chỉ định một vùng của đối tượng để hiển thị thay vì tất cả. Do đó chúng ta có thể sử dụng thuộc tính này để ẩn đối tượng bằng clip-path: circle(0);. Và để hiểu rõ hơn bạn xem ví dụ sau đây nhé:
See the Pen Sử Dụng Thuộc Tính clip-path CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Thuộc Tính visibility CSS
Thuộc tính visibility được dùng để xác định một đối tượng có được hiển thị hay không. Tuy vậy khi chúng ta sử dụng thuộc tính này để ẩn đối tượng thì sẽ không làm thay đổi bố cục(nghĩa là khoảng cách giữa các thành phần không đổi). Để hiểu rõ hơn bạn xem đoạn code sau nhé:
See the Pen Sử Dụng Thuộc Tính visibility CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Thuộc Tính position: absolute Trong CSS
Thuộc tính position:absolute giúp chúng ta xác định vị trí của phần tử trong thành phần cha của nó bằng việc sử dụng 4 yếu tố chính là top, right, bottom và left. Ở đây mình sẽ ẩn đối tượng bằng cách dùng top: -999px;. Để hiểu rõ hơn bạn xem đoạn code sau nhé:
See the Pen Sử Dụng Thuộc Tính position: absolute Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Thuộc Tính ::after Trong CSS
Thuộc tính ::after trong CSS giúp chúng ta thêm một thứ gì đó vào sau nội dung của đối tượng. Mình có một lưu ý nhỏ là nó không phải một phần tử trong DOM. Bây giờ chúng ta thử sử dụng thuộc tính này để ẩn đối tượng nhé:
See the Pen Sử Dụng Thuộc Tính ::after Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Cách Giảm Kích Thước Trong CSS
Đây là một cách giúp chúng ta ẩn đối tượng trong trang web bằng cách kết hợp một số thuộc tính CSS như là width, height, padding… . Và cái này sẽ tùy vào từng trường hợp mà bạn xác định thuộc tính cần kết hợp nha. Ngoài ra còn có thuộc tính khác bắt buộc phải có là overflow: hidden; giúp ngăn các nội dung hay khoảng cách của đối tượng bị ẩn tràn ra ngoài. Để nắm rõ hơn chúng ta hãy xem ví dụ sau đây nhé:
See the Pen Sử Dụng Cách Giảm Kích Thước Trong CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Thuộc Tính transform CSS
Thuộc tính transform giúp bạn có thể thao tác với các phần tử thông qua một số thuộc tính như là xoay, di chuyển phần tử, phóng to thu nhỏ phần tử… Bây giờ chúng ta hãy cùng nhau đi vào cách ẩn đối tượng bằng thuộc tính scale(0) nhé.
See the Pen Sử Dụng Thuộc Tính transform CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Hoặc chúng ta có thể sử dụng thuộc tính translate(-1999px, 0px) để ẩn đối tượng như ví dụ sau đây nhé:
See the Pen Sử Dụng Thuộc Tính transform CSS(2) by haycuoilennao19 (@haycuoilennao19) on CodePen.
Bài viết liên quan:
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách để ẩn đối tượng bằng CSS hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
