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

👩‍💻 Как работает свойство box-sizing в CSS?

Свойство box-sizing в CSS определяет, как вычисляются размеры элемента, включая его отступы и границы. Оно позволяет контролировать, включаются ли padding и border в общую ширину и высоту элемента.

➡️ Пример:

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }
  .content-box {
    box-sizing: content-box; /* значение по умолчанию */
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

<div class="box content-box">
  Content-box: ширина 200px + padding 20px + border 5px
</div>

<div class="box border-box">
  Border-box: общая ширина 200px, включая padding и border
</div>

🗣️ В первом случае (content-box) ширина элемента составляет 200px, но с учетом padding и border общая ширина увеличивается до 250px. Во втором случае (border-box) общая ширина элемента остается 200px, так как padding и border включены в эту ширину.

Использование box-sizing: border-box; упрощает расчет размеров элементов и предотвращает неожиданные изменения макета при добавлении отступов и границ.

CodeBase | Frontend | #css

👩‍💻 Как работает свойство position: sticky в CSS?

Свойство position: sticky позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости.

➡️ Пример:

<div class="container">
  <h2 class="sticky-header">Я остаюсь на месте!</h2>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
</div>

<style>
  .container {
    height: 200px;
    overflow: auto;
    border: 1px solid black;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* Фиксирует элемент у верхнего края контейнера */
    background-color: lightblue;
    padding: 10px;
  }
</style>

🗣️ В этом примере заголовок с классом .sticky-header остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.

Свойство sticky удобно для создания фиксированных заголовков таблиц, меню и других интерфейсных элементов, которые должны оставаться видимыми в пределах их контейнера.

CodeBase | Frontend | #css

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

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
  .box {
    position: absolute;
    width: 200px;
    height: 100px;
    color: white;
    padding: 10px;
  }

  .box1 {
    background: #888;
    top: 50px;
    left: 50px;
    z-index: 1;
  }

  .box2 {
    background: #e74c3c;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
</style>

🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS

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

Свойство object-fit управляет тем, как изображение или видео вписывается в контейнер.

Аналог background-size, но для тега <img> и <video>.

➡️ Пример:

<div class="wrapper">
  <img src="image.jpg" alt="пример">
</div>

<style>
  .wrapper {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

🗣 В этом примере изображение заполняет контейнер и обрезается по краям без искажений.

CodeBase | Frontend | #CSS

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

Свойство overflow управляет тем, как отображается контент, выходящий за границы блока.

Оно определяет, будет ли контент обрезан, прокручен или показан полностью.

➡️ Пример:

<div class="box">
  Очень длинный текст, который выходит за пределы блока.
</div>

<style>
  .box {
    width: 200px;
    height: 60px;
    overflow: auto;
    border: 1px solid #ccc;
  }
</style>

🗣 В этом примере, если текст не помещается — появляется прокрутка. overflow бывает: visible, hidden, scroll, auto.

CodeBase | Frontend | #CSS

⚙️ filter: drop-shadow() и box-shadow используются для создания теней, но работают по-разному.

box-shadow применяется к блочным элементам и создает тень вокруг их рамки. Тень может быть смещена, размыта и изменена по цвету.

.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

filter: drop-shadow() применяется к содержимому элемента, включая прозрачные области, такие как текст или изображения с альфа-каналом. Тень повторяет форму содержимого.

.element {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

Основное отличие: box-shadow работает с рамкой элемента, а drop-shadow учитывает форму содержимого, включая прозрачные части.

CodeBase | Frontend | #CSS