10 способов скрыть элемент с помощью CSS

В статье представлены 10 способов скрыть объект со страницы с помощью CSS

Сегодня мы рассмотрим 10 способов скрыть любой элемент с вашей страницы при помощи CSS стилей. Рано или поздно приходит время, когда вам нужно скрыть какой-либо блок, картинку или ссылку при помощи CSS, так как нет возможности напрямую удалить из html этот элемент. В этом случае вам и поможет наша статья. А каким из способов вам воспользоваться лучше и целесообразнее - тут решайте сами.

Для начала давайте перечислим все приёмы, которые мы рассмотрим в нашей статье, а потом поговорим вкрации про каждый из них, посмотрим примеры и их отличия.

  • display: none;
  • visibility: hidden;
  • opacity: 0;
  • position;
  • clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
  • transform: scale(0);
  • hidden;
  • height: 0; overflow: hidden;
  • filter: blur(100px);
  • text-indent: -99999px;

Все методы расставлены примерно в порядке их популярности использования. Если вам не подошел первый способ, то можете переходить ко второму и так далее. Начнем.

display: none;

Это свойство скрывает элемент и удаляет его из потока рендеринга. После применения свойства ваш объект не занимает места. Страница отображается так, как будто элемент попросту не существует.

See the Pen Display: none; by pyampa (@pyampa) on CodePen.


visibility: hidden;

Свойство visibility скрывает элемент, но сохраняет расчетное пространство в макете. Будет пустое пространство, в котором этот элемент был бы, но его содержимое скрыто.

See the Pen Visibility: hidden by pyampa (@pyampa) on CodePen.


opacity: 0;

Установка непрозрачности на значение 0 позволит вам скрыть элемент с виду, но он так же будет занимать место в вашем макете. Принципиальных отличий от предыдущего способа нет, просто разные свойства и подход к решению задачи.

See the Pen opacity: 0 by pyampa (@pyampa) on CodePen.


position;

Это свойство вам понадобится если вам нужен такой объект, чтобы вы могли с ним работать, но в то же время чтобы это не отразилось на раскладке веб-страницы. С помощью position мы просто выдвигаем ваш элемент за видимую область. Теперь мы его не видим, объект не влияет на ваш макет, но вы можете с ним взаимодействовать.

See the Pen position: absolute by pyampa (@pyampa) on CodePen.


clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

Теперь мы можем обрезать ваш элемент до прямоугольника размером 0px. Очень хороший метод, схож с нашим вторым и третьим методом скрытия элемента.

See the Pen clip-path: polygon by pyampa (@pyampa) on CodePen.


transform: scale(0);

Очевидно, если вы делаете что-то бесконечно маленьким, это «что-то» в итоге исчезнет. Стоит отменить, что изначальная область элемента сохранится, потому что действие трансформации по сути похоже на поведение элемента с position: relative;

Возврат значения scale в значение 1 заставит элемент появиться снова; этот переход также может быть анимирован.

Всем конечно же понятно, что если сделать элемент до бесконечности маленьким по размеру, то он в итоге исчезнет. Если вернуть значение scale единице, то ваш объект появится вновь. Область занимаемая объектом на странице сохранится.

See the Pen transform: scale(0) by pyampa (@pyampa) on CodePen.


hidden;

HTML5-атрибут hidden визуально работает так же, как display: none, но этот атрибут фиксирует состояние элемента.

При установке элементу атрибута hidden мы говорим, что элемент еще не имеет или уже не имеет непосредственного отношения к текущему состоянию страницы.

Атрибут hidden уже используется для таких HTML5-элементов, как details. В отличие от других описанных здесь методов, атрибут hidden скрывает элемент от любых способов представления, включая печать, мобильные и скринридеры. Поддерживается всеми современными браузерами, за исключениями одного.

See the Pen hidden by pyampa (@pyampa) on CodePen.


height: 0; overflow: hidden;

Данное решение уменьшает элемент до высоты 0 и благодаря этому делает его невидимым. Работает только тогда, когда у элемента нет видимой границы. Работает в совокупе с overflow: hidden;, которое скрывает все что "за оберткой" объекта. Не применяется к строчным элементам. Значение height не может быть анимировано, хотя max-height может.

See the Pen height: 0 by pyampa (@pyampa) on CodePen.


filter: blur(100px);

Достаточно свежий подход, который вообще не будет работать в IE (по крайней мере на данный момент). И всё же blur – неплохой вариант. Достаточное размытие делает элемент полностью невидимым, а при уменьшении значения blur до 0 элемент снова оказывается «в фокусе».

See the Pen blur(100px) by pyampa (@pyampa) on CodePen.


text-indent: -99999px;

С помощью данного свойства устанавливаем величину отступа первой строки блока текста (например, для абзаца). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

See the Pen text-indent by pyampa (@pyampa) on CodePen.


Вот и всё. В нашей статье мы рассмотрели 10 способов скрыть элемент с помощью CSS с вашей страницы. Какими из них пользоваться - решать вам. Если вы вдруг знаете еще какие-либо способы спрятать элемент с помощью CSS, то пишите в комментариях. Удачи!