⚙️ Что такое свойство visibility в CSS и зачем оно используется?

visibility — это CSS-свойство, которое управляет видимостью элемента, но при этом не удаляет его из документа. Оно позволяет скрывать элементы без изменения их занимаемого пространства.

➡️ Пример:

<div class="box">Этот блок всегда виден</div>
<div class="box hidden">А этот скрыт, но занимает место</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }

  .hidden {
    visibility: hidden; /* Элемент становится невидимым, но остаётся на месте */
  }
</style>

🗣 В этом примере:

• visibility: hidden; скрывает элемент, но он по-прежнему занимает место в разметке.
• display: none; убирает элемент полностью (в отличие от visibility).

Это свойство помогает управлять интерфейсом без изменения структуры страницы.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство pointer-events в CSS и зачем оно используется?

pointer-events — это CSS-свойство, которое управляет тем, может ли элемент реагировать на клики, наведение и другие события мыши. Оно позволяет делать элементы "прозрачными" для взаимодействия пользователя.

➡️ Пример:

<button class="disabled-btn">Нажми меня</button>

<style>
  .disabled-btn {
    background-color: gray;
    color: white;
    pointer-events: none; /* Элемент игнорирует клики */
    cursor: not-allowed;
  }
</style>

🗣 В этом примере:

• pointer-events: none; делает кнопку некликабельной, но оставляет её видимой.
• Это удобно для отключения кнопок, слоёв с анимацией или создания "сквозных" элементов.
• Значение pointer-events: auto; возвращает стандартное поведение.

Свойство pointer-events полезно для дизайна UI, управления интерактивностью и создания анимаций.

CodeBase | Frontend | #CSS

🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

🖥 Изучите шаг за шагом, как создать современный веб-макет с помощью HTML и CSS. Идеально подходит для новичков, желающих развить практические навыки в веб-разработке!

🕞 Продолжительность: 4:00:18

🔗 ссылка

CodeBase | Frontend | #CSS #html

⚙️ Что такое свойство user-select в CSS и зачем оно используется?

user-select — это CSS-свойство, которое управляет возможностью выделения текста пользователем. Оно полезно для защиты контента от копирования или улучшения UX в интерфейсах.

➡️ Пример:

<p class="no-select">Этот текст нельзя выделить.</p>

<style>
  .no-select {
    user-select: none; /* Запрещает выделение текста */
  }
</style>

🗣 В этом примере:

• user-select: none; запрещает выделение текста пользователем.
• user-select: all; позволяет выделять весь текст при клике.
• user-select: text; (по умолчанию) разрешает выделение.

Свойство user-select удобно для защиты контента, предотвращения случайного выделения и улучшения взаимодействия с пользователем.

CodeBase | Frontend | #CSS