Hi, xin chào các bạn ! Tiếp tục chuỗi bài viết về Front-End, trong bài viết này mình xin giới thiệu đến các bạn một cơ số cách để “ẩn” đi một phần tử với CSS.
Tại sao mình từ ẩn lại được đặt trong ngoặc kép 
. Ẩn ở đây có thể là “ẩn hẳn” (không thể đính được sự kiện lên phần tử) hoặc ẩn ở đây cũng có nghĩa là “không ẩn hẳn – vô hình” (vẫn có thể đính được sự kiện lên phần tử). Chi tiết như nào ta hãy cùng tìm hiểu nhé
1. opacity và filter: opacity()
opacity thì quá quen thuộc với các dev rồi, filter: opacity(N); thì ít được dùng hơn. Và chỉ cần set giá trị về 0 bạn có thể ẩn đi được phần tử đó, với cách này ta vẫn có thể đính kèm được sự kiện lên phần tử (nó không hoàn toàn ẩn đi mà chỉ đơn thuần vô hình thôi)
1 2 3 4 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
2. color Alpha Transparency
Chắc hẳn bạn cũng đã làm việc với mã màu rgba() hoặc hsla() rồi, khi đó chỉ cần set giá trị Alpha (giá trị thứ 4) về 0 thì ta có thể ẩn đi được phần tử
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>r, g, b, 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>r, g, b, 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* or */</span> <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>h, s, l, 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">hsla</span><span class="token punctuation">(</span>h, s, l, 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
3. transform
transform trong CSS3 thì quá lợi hại rồi, bạn có thể dùng hàm scale() hoặc translate để biến đổi phần tử. Cụ thể ta có thể dùng 3 cách
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* or */</span> <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-999px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* or */</span> <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-999px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4. clip-path
clip-path cũng là 1 ứng cử viên nặng kí cho chủ đề này, để ẩn đi phần tử ta làm như sau
1 2 3 4 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">circle</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
5. visibility
Cái tên nói lên tất cả, để ẩn phần tử với visibility
1 2 3 4 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
6. display
Quả này là nguy hiểm nhất, khi display nhận giá trị none, nó sẽ ẩn hoàn toàn phần tử đi và bạn không thể đính kèm được sự kiện lên phần tử đó
1 2 3 4 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Đây thường là sự lựa chọn #1 của các dev, tuy nhiên trong 1 số trường hợp nó cũng không phải là sự lựa chọn hoàn hảo (ví dụ kết hợp display với transition)
7. hidden
hidden là một thuộc tính trong HTML mà ở đó nó đã được mặc định default css là display: none. Ta sử dụng như sau
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span> Hidden content <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> |
8. Absolute
Việc sử dụng absolute cũng khá giống như transform, tức là bạn có thể chỉ định 4 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
1 2 3 4 5 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -999px<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
9. Overlay
Sử dụng phần tử giả cũng có thể giúp ta ẩn đi phần tử (tuy nhiên lưu ý đây chỉ là ẩn đi “bằng việc set background theo phần tử cha”)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">element:after</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
10. Giảm thiểu kích thước
Cách cuối cùng mình muốn giới thiệu ở đây là sự kết hợp giữa 3 thuộc tính height, padding, overflow
1 2 3 4 5 6 | <span class="token selector">element</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Kết Luận
Trên đây mình đã giới thiệu cho các bạn một số cách để ẩn đi phần tử bằng CSS, hi vọng giúp ích cho các bạn trong khi làm việc
Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !