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

object-fit — это CSS-свойство, которое определяет, как содержимое <img> или <video> должно масштабироваться внутри контейнера. Оно позволяет изменять размер изображения, сохраняя его пропорции, без искажений.

➡️ Пример:

<img src="image.jpg" class="responsive-img" alt="Пример изображения">

<style>
  .responsive-img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* Заполняет контейнер, обрезая лишнее */
  }
</style>

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

• object-fit: cover; делает так, что изображение заполняет контейнер, но не растягивается.
• object-fit: contain; сохраняет весь контент, добавляя пустое пространство.
• Это свойство особенно полезно при адаптивной вёрстке и работе с изображениями разного размера.

CodeBase | Frontend | #CSS

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

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

➡️ Пример:

<div class="box">Этот текст слишком длинный для блока и может выходить за его границы.</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    overflow: hidden; /* Обрезаем лишний контент */
  }
</style>

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

• overflow: hidden; обрезает текст, выходящий за границы блока.
• overflow: scroll; добавляет прокрутку внутри контейнера.
• overflow: auto; включает прокрутку, если контент не помещается.

Это свойство важно для управления адаптивностью и предотвращения ломки верстки.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство 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

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

aspect-ratio — это CSS-свойство, которое позволяет задавать соотношение сторон элемента (ширина к высоте). Оно особенно полезно для адаптивной верстки, когда нужно сохранить форму элемента независимо от содержимого или экрана.

➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Соотношение 16:9 */
    background-color: lightblue;
  }
</style>

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

• aspect-ratio: 16 / 9; заставляет элемент сохранять форму прямоугольника с шириной в 16 единиц и высотой в 9.
• Это особенно удобно для видео, изображений, контейнеров с неизвестной высотой.
• Работает без необходимости использовать padding-hack или JavaScript.

Свойство aspect-ratio делает вёрстку проще и адаптивнее без дополнительных обёрток и расчётов.

CodeBase | Frontend | #CSS

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

object-position — это CSS-свойство, которое управляет положением содержимого внутри элемента, например, изображения или видео, особенно когда используется object-fit для обрезки.

➡️ Пример:

<img src="image.jpg" class="preview" alt="Пример изображения">

<style>
  .preview {
    width: 300px;
    height: 200px;
    object-fit: cover;
    object-position: top right; /* Смещаем фокус к верхнему правому углу */
  }
</style>

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

• object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.
• object-position: top right; указывает, какую часть изображения показывать в приоритете.
• Можно использовать значения вроде center, bottom, 20% 80% и др.

Свойство object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.

CodeBase | Frontend | #CSS

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

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

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

🔗 Ссылка

CodeBase | Frontend | #курс #html #css

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

white-space — это CSS-свойство, которое управляет отображением пробелов и переносом строк внутри элемента. Оно определяет, как браузер будет обрабатывать пробелы, табуляции и переводы строк.

➡️ Пример:

<div class="text">
  Этот   текст  
  сохраняет    пробелы
  и переносы.
</div>

<style>
  .text {
    white-space: pre; /* Сохраняем пробелы и переносы */
    border: 1px solid black;
  }
</style>

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

• white-space: normal; — пробелы схлопываются, текст переносится автоматически (значение по умолчанию).
• white-space: nowrap; — текст не переносится.
• white-space: pre; — сохраняются все пробелы и переносы, как в коде.

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

CodeBase | Frontend | #CSS

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

text-overflow управляет тем, как обрезается текст, выходящий за пределы блока. Оно работает вместе с overflow: hidden и white-space: nowrap, чтобы отображать, например, троеточие.

➡️ Пример:

<div class="truncate">Очень длинный текст, который не помещается</div>

<style>
  .truncate {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #ccc;
  }
</style>

🗣 В этом примере длинный текст обрезается и заменяется троеточием (...), не выходя за рамки блока. Это удобно для заголовков, превью и адаптивных карточек в UI.

CodeBase | Frontend | #CSS

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

Свойство flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами.

Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.

➡️ Пример:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

<style>
  .container {
    display: flex;
    width: 300px;
    border: 1px solid #ccc;
  }
  .item {
    padding: 10px;
    color: white;
  }
  .item1 { flex-grow: 1; background: #007bff; }
  .item2 { flex-grow: 2; background: #28a745; }
  .item3 { flex-grow: 1; background: #dc3545; }
</style>

🗣 В этом примере у второго элемента flex-grow: 2, поэтому он занимает в два раза больше места, чем соседние блоки.

CodeBase | Frontend | #CSS

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

position: sticky фиксирует элемент внутри его родителя, когда он достигает определённого положения при прокрутке.

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

➡️ Пример:

<div class="section">
  <h2 class="sticky-title">Заголовок</h2>
  <p>Контент...</p>
</div>

<style>
  .section {
    height: 1500px;
    padding: 20px;
  }

  .sticky-title {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>

🗣 В этом примере заголовок "прилипает" к верхней части экрана при прокрутке, но только в пределах родительского блока .section.

CodeBase | Frontend | #CSS

👩‍💻 Псевдокласс :focus

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки:

⏺ Смену стилей между состояниями можно анимировать при помощи transition

⏺ В браузер встроены дефолтные стили для фокуса.

⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

CodeBase | Frontend | #css