ways to hide elements in css

You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affects the layout of the page. visibility: hidden hides the element while keeping the space the same. but there is a total of 8 ways to hide elements in CSS.


1.The opacity: N and filter: opacity(N) properties can be passed a number between and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly but a fully transparent element remains on the page and can trigger events.

    opacity: 0;
    
/* 
    alternatively
    opacity: 0%;
    filter: opacity(0%); 
*/

2. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent.

    color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);

3. A scale (0) or translate(-999px, Opx) off-screen will hide the element.

    transform: scale(0);

/* 
    alternatively:
    transform: translate(-999px, 0);
*/

4. The clip-path property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.

    clip-path: circle(0);

5. The visibility property can be set to visible or hidden to show and hide an element.

    visibility: hidden;

6. Display is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.

    display: none;

7. The HTML hidden attribute can be added to any element.

    <p hidden>
        Hidden Content
    </p>
[hidden] {
    display: none;
}

8. The position property allowS an element to be moved from its default static position within the page layout using top, bottom, left, and right. An absolute-positioned element can therefore be moved off-screen with left: -999px or similar.

    position: absolute;
    left: -999px;

Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image