10 способів приховати елементи в CSS

Привіт:) У цьому гайді детально покажу як приховати елементи за допомогою CSS. Розгляну різні варіанти, їх особливості та відмінності. Ви побачите коли і в якому випадку слід використовувати той чи інший спосіб.

На сторінках сайту буває необхідно приховати елемент в залежності від ситуації. Наприклад, на ПК показати рекламний банер, а на мобільному сховати його. Є декілька варіантів це зробити. Покажу детально кожен із них.

Для прикладу нехай є 3 однакових блоки, з яких середній буде приховуватися.

<div class="wrapper">
  <div class="container">
    <div class="left-block">1</div>
    <div class="center-block">2</div>
    <div class="right-block">3</div>
  </div>
</div>

.wrapper {
    display: flex;
	align-items: center;
	justify-content: center;
    max-width: 1300px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: content-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 700px;
  outline: 2px solid black;
}

[class*="-block"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  margin: 15px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background: red;
}

до змісту ↑

opacity та filter: opacity()

Одним із найпростіших способів приховати елемент є налаштування його непрозорості. Властивість opacity дозволяє зробити елемент повністю прозорим, встановивши для нього значення 0:

.center-block {
  opacity: 0;
}

Результатом буде:

Крім того, ви можете використовувати властивість filter з функцією opacity():

.center-block {
  filter: opacity(0);
}

Результат буде аналогічним.

до змісту ↑

visibility

CSS-властивість visibility дозволяє контролювати видимість елемента. Якщо встановити для нього значення hidden, то елемент візуально сховається, але при цьому зберігатиме простір серед інших HTML-елементів сторінки.

.center-block {
  visibility: hidden;
}

до змісту ↑

display

Ця властивість, мабуть, найчастіше використовується веб-розробниками. Встановивши для неї значення none, елемент повністю видаляється із потоку DOM, і робиться таким, ніби він ніколи не існував на поточній HTML-сторінці.

.center-block {
  display: none;
}

до змісту ↑

color та background-color

Ще один спосіб приховати HTML-елемент — застосувати нульовий альфа-канал кольору за допомогою rgba(0,0,0,0). Це зробить елемент повністю прозорим.

.center-block {
  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

до змісту ↑

transform

Наступний варіант — застосування CSS-властивості transform.

.center-block {
  transform: scale(0);
}

або

.center-block {
  transform: translate(-9999px, 0);
}

до змісту ↑

clip-path

Ця властивість створює область відсікання, яка визначає, які частини елемента є видимими. Використання її значення circle(0) або polygon(0px 0px,0px 0px,0px 0px,0px 0px) повністю приховає елемент.

/* ВАРІАНТ 1 */

.center-block {
  clip-path: circle(0);
}

/* ВАРІАНТ 2 */

.center-block {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

до змісту ↑

HTML-атрибут hidden

Цей атрибут можна додати до будь-якого елементу:

<!-- ВАРІАНТ 1 -->

<div class="center-block" hidden>2</div>

<!-- ВАРІАНТ 2 -->

<div class="center-block" hidden="">2</div>

<!-- ВАРІАНТ 3 -->

<div class="center-block" hidden="hidden">2</div>

до змісту ↑

position

Властивість position дозволяє елементу переміщуватися зі статичної позиції (за замовчуванням) в межах DOM-дерева HTML-елементів сторінки за допомогою параметрів top, bottom, left та right. Таким чином, абсолютно позиціонований елемент можна перемістити за межі екрану вліво, вправо, вгору та вниз.

.center-block {
  position: absolute;
  left: -9999px;
  right: -9999px;
}

до змісту ↑

Накладання іншого елементу

Також елемент можна візуально приховати, розташувавши над ним інший елемент того самого кольору, що й фон. У цьому прикладі використовується псевдоелемент ::after, хоча можна використовувати будь-який дочірній елемент.

Для мого прикладу допишіть декілька рядків:

.center-block {
  position: relative;
}

.center-block::after {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
}

до змісту ↑

Зменшення розмірів

Елемент також можна приховати, зменшивши його розміри.

.center-block {
  height: 0px;
  padding: 0px;
  overflow: hidden;
}