Здравствуйте, уважаемые читатели этого блога. Сегодня я предлагаю разобраться с вопросом, как в css скрыть элемент. На самом деле это можно сделать кучей способов, но все они применяются в разных ситуациях. Все примеры я предлагаю рассматривать на трех блоках. Скрывать мы будем второй блок.
Как в css скрыть элемент с помощью свойств display и visibility
Итак, это первый и самый распространенный способ. В css есть свойство display, которое влияет на отображение элемента на странице. Его значение none скрывает элемент со страницы, причем убирается даже место под него, так что никаких следов не остается.
Этим способом следует пользоваться тогда, когда элемент нужно будет позже сделать видимым.
Второй способ практически аналогичен. Он заключается в том, что элементу задается visibility: hidden. Правило практически полностью идентично первому, но место под блок остается, то есть на месте элемента будет пустое место. Соответственно, иногда такой вариант подойдет лучше. Тут надо смотреть в каждом конкретном случае.
Как убрать видимость элемента другими способами
Вышеприведенные варианты хороши во всем, но при появлении элемента это будет происходить резко, а иногда необходимо сделать плавное появление. В CSS3 появились новые команды для изменения параметров видимости элемента:
Свойство opacity. По сути, это прозрачность. Свойство принимает значения от 0 до 1, где 0 – полностью прозрачный элемент. Соответственно, его не будет видно на странице. Отлично, заодно и можно добиться эффекта плавного появления, о котором я также написал здесь. Конечно же, место под блок остается, поскольку он не убирается со страницы.
Аналогичный вариант – задать элементу прозрачный фон. Он задается вот так: background: transparent. Элемент сольется цветом с родителем, но если у него есть цветная рамка или тень, то ее будет видно.
Наконец, элемент можно просто сжать до 0 пикселей. Это делается с помощью свойства transform и его значения scale(), где в скобках записывается размер от 0 до произвольного числа. Нам нужно написать именно 0, чтобы элемент сжался до ничего. Такой прием тоже позволяет применить плавное преобразование, если это будет необходимо.
Как видите, в css скрыть элемент можно по-разному. Есть и другие способы. Например, задать блоку абсолютное позиционирование и, прописав координаты, вынести его за пределы окна браузера. Но это какой-то примитивный метод. В таком случае правильнее воспользоваться одной из опций CSS3-трансформаций – перемещением.
Как скрыть элемент за пределы окна браузера
Для этого можно применить transform:transition(). В скобках у этого свойства записывается два значения. Первое – сдвиг элемента по горизонтали, второе – по вертикали, соответственно. Вот и все. Впишите туда пару тысяч пикселей и блок отправится в путешествие за пределы окна.
При определенных действиях пользователя его можно будет вернуть в окно, причем сделать это плавно.
В общем, это все способы, с помощью которых можно в css скрыть блок со страницы. Используйте их, потому что каждый хорош для разных ситуаций.
Хотел бы добавить, что с помощью скриптов также можно скрыть элемент, а можно его и вовсе удалить. Об этом читайте в этой статье.