Visibility или как сотворить невидимость

Visibility или как сотворить невидимостьЗдравствуйте уважаемые читатели. Извините, что неделю ничего не писал. Но столько всего навалилось.

Завал на работе, день рождения сына. Да и еще какая-то хандра нашла. Вообщем где-то так.

Сегодняшняя статья будет не сильно большой, но кто-то явно найдет ее полезной.

Дело в том, что недавно один мой читатель спросил у меня: «Сергей как можно скрыть счетчик?. Но при этом, что бы он продолжал работать»

Этой статьей я отвечу на его вопрос. И если вам тоже интересен данный вопрос, милости прошу

Поможет нам в решении данной задачи как всегда CSS.

А именно его параметр visibility

Visibility – отвечает за видимость элемента.

Параметры visibility

  • Visible — Значение по умолчанию ко всем элементам. Означает видимый;
  • Hidden – Скрывает элемент;
  • Collapse – Работает только для содержимого ячеек таблиц, они полностью пропадают;
  • Inherit — наследует значение родителя;

Visibility примеры и результаты

Для того, что бы показать пример. Создадим три тега div. Пусть это будут квадраты 100 на 100 пикселей. Верхний синий, потом зеленый и в конце красный.

Html

1
2
3
<div class="kvblue"></div>
<div class="kvgreen"></div>
<div class="kvred"></div>

CSS стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
}
.kvred{
background:red;
height:100px;
width:100px;
}

Результат:

Visibility или как сотворить невидимость

Теперь сделаем невидимым зеленый квадрат

Html

1
2
3
<div class="kvblue"></div>
<div class="kvgreen"></div>
<div class="kvred"></div>

CSS стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.kvblue{
background:blue;
height:100px;
width:100px;
}
.kvgreen{
background:green;
height:100px;
width:100px;
visibility:hidden;
}
.kvred{
background:red;
height:100px;
width:100px;
}

Результат:

Visibility или как сотворить невидимость

Как видите, зеленый квадрат исчез. Но правильнее сказать стал на 100 процентов прозрачным. Подобного эффекта можно добиться, применив прозрачность на css. Он до сих пор на месте, так как красный квадрат не изменил своего местоположения. А должен был бы занять место зеленного.

!!!visibility: hidden – Ничего не меняет в объекте кроме прозрачности.

И это надо учитывать. С помощью visibility не получится вырезать элемент с дизайна. Для этого существует другой инструмент из стана CSS.

На это все удачи!!!

С уважением Тригуба Сергей

Интересное — Новый ЖД Транспорт в Москве

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев8 комментариев
Кирилл
1

width: 0px;

heigth: 0px;

мне кажется это надёжнее

    В таком случае элементы сместятся и потеряется сама суть свойства.

      Кирилл
      1.2

      я не совсем понял вас)))

        с помощью Visibility можно просто заставить элемент ищезнуть, но он останется на своем месте и дизайн не будет развален. Если допустим на него завязаны другие блоки.

Андрей
2

У Вас написано «И это надо учитывать. С помощью visibility не получится вырезать элемент с дизайна. Для этого существует другой инструмент из стана CSS». Скажите пожалуйста, что это за инструмент для вырезания? (только если не width и height по нулям). Просто у меня на сайте в одном из компонентов объект, который мне не нужен, но в компоненте его отключить нельзя, а если пользоваться visibility: hidden;, то он исчезает, но сохраняется большой ненужный отступ. Как можно вырезать его в css? Заранее благодарен.

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет