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

opacity — это CSS-свойство, которое задаёт степень прозрачности элемента. Значение opacity может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это полезно для создания визуальных эффектов, таких как затемнение или появление элементов.

➡️ Пример:

<div class="opaque-box">Прозрачный текст</div>

<style>
  .opaque-box {
    background-color: lightblue;
    opacity: 0.5; /* Устанавливаем 50% прозрачности */
    padding: 20px;
    text-align: center;
  }
</style>

🗣 В этом примере свойство opacity делает элемент .opaque-box полупрозрачным, что особенно полезно для наложений и визуального выделения интерфейсов.

CodeBase | Frontend | #CSS

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

Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.

Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно

➡️ Пример:

<div class="card"></div>

<style>
  .card {
    width: 300px;
    aspect-ratio: 16 / 9;
    background: #007bff;
    border-radius: 8px;
  }
</style>

🗣 В этом примере элемент всегда сохраняет пропорции 16:9, независимо от ширины контейнера.

Частые применения:

• видео, изображения и превью с фиксированным соотношением сторон
• карточки, аватары и responsive UI
• создание адаптивных сеток без "резиновых" искажений

CodeBase | Frontend | #CSS