CSS - Видимость: Как сделать элементы appear и disappear

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в fascинирующий мир видимости CSS. Как ваш добрый сосед по компьютеру, я с радостью проведу вас через это путешествие. К концу этого руководства вы сможете сделать элементы исчезать и появляться как настоящий маг CSS!

Что такое CSS Видимость?

Прежде чем мы начнем挥舞ать наши CSS жезлы, давайте поймем, что такое видимость. На самом простом уровне, CSS видимость контролирует, виден ли элемент или скрыт на веб-странице. Это как играть в прятки с вашими HTML элементами!

Possible Values

Давайте рассмотрим различные значения, которые мы можем использовать с свойством видимости:

Значение	Описание
visible	Элемент виден (это значение по умолчанию)
hidden	Элемент скрыт, но все еще занимает место
collapse	Используется в основном для таблиц, мы рассмотрим это!
inherit	Наследует видимость от родительского элемента

Применяется к

Свойство видимости может быть применено ко всем HTML элементам. Да, вы правильно heard - всем! От div до paragraphs, от изображений до таблиц, вы называете их, и видимость проделает свою магию.

Синтаксис DOM

Теперь давайте посмотрим, как мы можем использовать видимость в нашем CSS:

element {
visibility: value;
}

Просто, правда? Замените 'element' на HTML элемент, на который вы хотите воздействовать, и 'value' на одно из значений видимости, которые мы обсуждали ранее.

CSS видимость - значение visible

Давайте начнем с значения по умолчанию, 'visible'. Вот пример:

<div class="visible-box">Можете ли вы меня увидеть?</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

В этом примере мы создали светло-синюю коробку с текстом "Можете ли вы меня увидеть?". Видимость установлена на 'visible', что означает... вы угадали, коробка видна! Это поведение по умолчанию, поэтому даже если бы мы не указали видимость, результат был бы таким же.

CSS видимость - значение hidden

Теперь давайте сделаем вещи исчезающими! Вот как использовать значение 'hidden':

<div class="hidden-box">Теперь вы видите меня...</div>
<div class="visible-box">Теперь вы не видите!</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

В этом примере у нас есть две коробки. Первая установлена на 'hidden', поэтому она не будет видна на странице. Однако - и это важно - она все еще занимает место! Вторая коробка появится сразу после невидимого места первой коробки.

Это differs от display: none, который удаляет элемент из макета полностью. Представьте 'hidden' как невидимую накидку - элемент все еще там, вы просто не можете его увидеть!

CSS видимость - значение collapse

Значение 'collapse' немного особенное. Оно主要用于 таблиц. Давайте посмотрим, как это работает:

<table>
<tr>
<td>Я виден!</td>
<td class="collapsed">Я скрыт!</td>
<td>Я тоже виден!</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

В этом примере средняя ячейка нашей строки таблицы установлена на 'collapse'. Это означает, что она будет скрыта, и место, которое она занимала, будет занято окружающими ячейками. Это как будто ячейка никогда не существовала!

CSS видимость - Collapse на нестабличных элементах

Теперь вы можете задаться вопросом: "Что произойдет, если я использую 'collapse' на нестабличном элементе?" Хороший вопрос! Поведение может варьироваться между браузерами, но в общем, оно будет действовать так же, как 'hidden'. Давайте попробуем:

<div class="normal">Я нормальный div</div>
<div class="collapsed">Я скрытый div</div>
<div class="normal">Я другой нормальный div</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

В большинстве браузеров, 'collapsed' div будет вести себя так, как если бы у него было visibility: hidden. Он не будет виден, но будет занимать место.

CSS видимость - Эффекты перехода

Вот где事情 становятся действительно интересными! Мы можем использовать CSS переходы, чтобы создать плавные эффекты видимости. Проверьте это:

<div class="magic-box">Наведите на меня!</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

В этом примере, когда вы наводите курсор на коробку, она будет плавно исчезать и становиться невидимой. Когда вы убираете鼠标, она будет плавно появляться. Мы combine видимость с непрозрачностью, чтобы создать этот эффект. Круто, правда?

И вот и все,folks! Вы только что узнали все о CSS видимости. Помните, с большой силой приходит большая ответственность. Используйте свои новые навыки видимости мудро, и ваши веб-страницы поблагодарят вас!

Before we wrap up, here's a little joke for you: Why did the CSS element go to therapy? It had too many hidden issues! ?

Счастливого кодирования, и пусть ваши элементы всегда будут видны, когда вы хотите их видеть!

Credits: Image by storyset