Hi guys Continue the series of articles about Front-End, in this article I would like to introduce you to a number of ways to “hide” an element with CSS.
Why are you hidden words in quotation marks? 
. Hiding here may be “hidden” (cannot attach events to element) or hidden here also means “not completely hidden – invisible” (still able to attach events to elements). Details like let’s find out
1.opacity and filter: opacity ()
opacity is too familiar with dev already, filter: opacity(N); less often used. And just set the value to 0 you can hide the element, this way we can still attach events to the element (it is not completely hidden but merely invisible)
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
You probably already worked with rgba () or hsla () color code, then just set the Alpha value (the fourth value) to 0, then you can hide the element.
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 in CSS3 are too dangerous, you can use the scale () function or translate to transform the element. Specifically we can use 3 ways
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 is also a strong candidate for this topic, to hide the elements we do as follows
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
The name says it all, to hide the element with 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
This is the most dangerous, when the display receives none , it will hide the element completely and you cannot attach the event to that element.
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> |
This is usually the # 1 choice for developers, but in some cases it’s not the perfect choice (for example, combining display with transition ).
7. hidden
hidden is an attribute in HTML where it has defaulted to css display: none . We use the following
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
Using absolute is quite similar to transform , ie you can specify 4 top / bottom / left / right values into negative values to move element out of view.
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
Using pseudo-element can also help us to hide element (however note that this is only hidden “by setting background according to parent element”)
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. Minimize size
The last way I want to introduce here is a combination of 3 attributes 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> |
Conclude
Above I have introduced you some ways to hide elements with CSS, hoping to help you while working.
If you find a good article, give me +1 upvote. If you like me, click the follow button for more cool stuff. Good luck !