Ảnh minh họa: Nanado
Giới thiệu
CSS là một công cụ mạnh mẽ giúp chúng ta tạo ra giao diện đẹp và chuyên nghiệp. Trong bài viết này, chúng ta sẽ khám phá 10 cách để ẩn đi một phần tử bằng CSS. Điều này sẽ rất hữu ích cho những bạn làm việc trong lĩnh vực Front-End. Hãy cùng tìm hiểu nhé!
1. Opacity và Filter: Opacity()
Đối với những phần tử mà chúng ta muốn ẩn đi một cách tinh tế mà vẫn có thể gắn kết sự kiện lên phần tử đó, chỉ cần đặt giá trị opacity về 0. Ví dụ:
element { opacity: 0; }2. Màu với Độ Mờ Alpha
Mã màu rgba() và hsla() rất quen thuộc đối với các developer. Khi chúng ta đặt giá trị Alpha (giá trị thứ 4) về 0, chúng ta có thể ẩn đi phần tử. Ví dụ:
element { color: rgba(r, g, b, 0); background-color: rgba(r, g, b, 0); }3. Transform
Transform là một tính năng mạnh mẽ của CSS3. Bạn có thể sử dụng hàm scale() hoặc translate để biến đổi phần tử. Dưới đây là 3 cách sử dụng transform:
element { transform: scale(0); } /* or */ element { transform: translateX(-999px); } /* or */ element { transform: translateY(-999px); }4. Clip-path
Clip-path cũng là một cách để ẩn đi phần tử. Hãy xem ví dụ dưới đây:
element { clip-path: circle(0); }5. Visibility
Thuộc tính visibility nói lên tất cả. Để ẩn đi phần tử, chúng ta có thể sử dụng:
element { visibility: hidden; }6. Display
Display là một lựa chọn mạnh mẽ để ẩn hoàn toàn phần tử và không thể gắn kết sự kiện lên phần tử đó. Dưới đây là ví dụ:
element { display: none; }7. Hidden
Thuộc tính hidden đã được mặc định trong HTML với giá trị display là none. Chúng ta có thể sử dụng như sau:
Nội dung ẩn
8. Absolute
Sử dụng thuộc tính absolute cũng giống như sử dụng transform. Bạn có thể chỉ định các giá trị top/bottom/left/right thành các giá trị âm để di chuyển phần tử ra khỏi khung nhìn. Ví dụ:
element { position: absolute; left: -999px; }9. Overlay
Sử dụng phần tử giả cũng có thể giúp ẩn đi phần tử. Tuy nhiên, lưu ý rằng đây chỉ là ẩn đi "bằng cách đặt background theo phần tử cha". Ví dụ:
element { position: relative; } element:after { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0; background: #fff; }10. Giảm Kích Thước
Cuối cùng, chúng ta có thể kết hợp ba thuộc tính height, padding và overflow để giảm kích thước phần tử. Ví dụ:
element { height: 0; padding: 0; overflow: hidden; }Kết Luận
Trên đây là 10 cách để ẩn đi phần tử bằng CSS mà chúng ta đã tìm hiểu. Hi vọng những cách này sẽ giúp ích cho bạn trong quá trình làm việc. Nếu bạn thấy bài viết hữu ích, hãy +1 upvote cho chúng tôi. Đừng quên nhấn nút follow để cập nhật thêm nhiều thông tin thú vị khác. Chúc bạn thành công trong công việc!
