Навыки Верстальщика

Различие между CSS свойством box-shadow и filter: drop-shadow

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

filter: drop-shadow - применяет тень к содержимому элемента, а не к его границам, и позволяет задать так же: смещение, размытие и цвет тени

⚡️ Навыкиверстальщика | CSS

Псевдокласс is() в CSS

Позволяет вам группировать несколько селектор в один, что упрощает написание CSS стилей

.cart__number:is(:hover, :focus) {
 outline: 1px solid var(--accent);
 color: var(--accent);
}

⚡️ Навыкиверстальщика | CSS

Атрибут inert в HTML

Используется для того, чтобы временно отключить элемент на странице от взаимодействия с пользователем и исключить его из потока фокуса (например, при навигации с клавиатуры). Элемент с атрибутом inert становится неактивным, что значит:

Он не фокусируется при использовании клавиатурной навигации (например, с клавишей Tab).

На элементы внутри этого блока не реагируют события, такие как: клики мышкой или ввод с клавиатуры.

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

⚡️ Навыкиверстальщика | CSS

display: contents — это свойство CSS, которое делает дочерние элементы контейнера видимыми на странице, но сам контейнер фактически "исчезает" из визуального потока.

Рассмотрим пример того, как можно использовать свойство display: contents при адаптации верстки под моб устройства.

На экранах меньше 767px используется свойство display: contents, которое убирает контейнер .product__bottom, оставляя его дочерние элементы (.product__price и .product__btn) видимыми, как если бы они были на одном уровне с другими элементами карточки.

Свойство order: -1 применяется для изменения порядка элементов на мобильных устройствах, перенося блок с ценой выше.

Это даёт возможность гибко управлять отображением без необходимости изменять HTML-разметку.

⚡️ Навыкиверстальщика | CSS

Свойство clip-path в CSS позволяет создавать маски для элементов, ограничивая видимую область внутри заданного контура. Оно может быть очень полезным для создания различных форм и эффектов без необходимости использования изображений

Примеры использования clip-path:

Обрезка по кругу:

.element {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(50%);
}

Обрезка элемента по многоугольнику:

.element {
  width: 200px;
  height: 200px;
  background: green;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

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

⚡️ Навыкиверстальщика | CSS

Свойство mix-blend-mode

Определяет, как цвета и изображения в элементе должны смешиваться с его фоном или содержимым

В нашем примере рассмотрим эффект наложения цвета с картинкой с помощью данного свойства 👆

⚡️ Навыкиверстальщика | CSS

CSS свойство columns используется для создания многоколоночного текстового макета. Это позволяет разделить текст на колонки, что особенно полезно для улучшения оформления текстового контента на сайте

Вот некоторые особенности и возможности свойства columns в CSS:

1. Разделение текста на колонки:
- Свойство columns позволяет задать количество колонок и их ширину для разделения текста.
- Текст будет автоматически распределен по заданным колонкам

2. Контроль над колонками:
- Вы можете настроить различные параметры колонок, такие как ширина, отступы между колонками, разделители и другие стилизации.


3. Адаптивность:
- Свойство columns позволяет создавать адаптивные многостолбцовые макеты, которые могут автоматически изменяться в зависимости от ширины родительского контейнера.

⚡️ Навыкиверстальщика | CSS

Правило @supports в CSS - это условное групповое правило, которое позволяет применять блок стилей только в том случае, если определенное условие истинно.

Оно проверяет, поддерживает ли браузер определенное свойство CSS , прежде чем применять стили внутри блока.

В нашем случае стили внутри блока @supports будут применены только в том случае, если браузер поддерживает свойство display: grid . Если условие не выполняется, стили внутри блока будут проигнорированы.

⚡️ Навыкиверстальщика | CSS

Псевдоэлемент ::marker в CSS используется для стилизации маркеров элементов списка, таких как <li> в ненумерованных (<ul>) или нумерованных (<ol>) списках.

Этот Псевдоэлемент позволяет контролировать внешний вид символов, используемых для маркировки пунктов списка, включая такие свойства как цвет, размер шрифта и использование шрифта.

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

⚡️ Навыкиверстальщика | CSS

Wave анимация текста на чистом CSS

HTML:

<div class="text">
        <div class="title">Wave animation text</div>
        <div class="title">Wave animation text</div>
      </div>

CSS:

.text {
  position: relative;
}

.title {
  color: #fff;
  font-size: 72px;
  font-weight: bold;
  position: absolute;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  white-space: nowrap;
}

.text > .title:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.308);
}

.text > .title:nth-child(2) {
  color: #73aaf7;
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

⚡️ Навыкиверстальщика | CSS

Атрибут aria-hidden используется в HTML для повышения доступности контента, указывая, что элемент и все его дочерние элементы должны быть недоступны для таких технологий как экранные читалки

Атрибут aria-hidden рекомендуется использовать в следующих сценариях для повышения доступности веб-контента:

1. Декоративные элементы: Элементы, которые служат чисто визуальной цели и не несут информационной нагрузки, такие как иконки или декоративная графика, могут быть отмечены aria-hidden="true", чтобы экранные читалки игнорировали их.

2. Динамически скрытый/показываемый контент: В ситуациях, когда используется динамическое переключение между скрытым и видимым состояниями контента (например, аккордеоны, выпадающие меню, табы), атрибут aria-hidden может быть динамически изменен с true на false и наоборот.

3. Дублирующий контент: Когда информация представлена в нескольких форматах (например, текст и графика, представляющая то же самое), можно скрыть визуальные элементы, чтобы избежать дублирования информации при чтении экранными читалками.

⚡️ Навыкиверстальщика | HTML

CSS функции min() и max()

Позволяют определять минимальное или максимальное значение элемента.

Функция min() возвращает наименьшее значение из набора аргументов. Это позволяет задать значение, которое будет адаптироваться к условиям, но не превысит заданный максимум. Пример использования:

width: min(100vw, 600px);

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

Функция max() возвращает наибольшее значение из набора аргументов. Это позволяет задать минимальное значение, ниже которого размер или другой параметр стиля упасть не могут. Пример использования:

width: max(50vw, 300px);

В этом случае ширина элемента будет равна 50% ширины окна просмотра (50vw), но не менее 300 пикселей. Это означает, что на экранах шириной менее 600 пикселей (где 50% окажется меньше 300 пикселей) ширина элемента будет фиксированной и равной 300 пикселям, а на более широких экранах элемент будет расширяться, занимая половину ширины экрана.

⚡️ Навыкиверстальщика | CSS

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

Когда pointer-events задано как none, элемент фактически становится прозрачным для событий мыши. Клики как бы "пронизывают" его, попадая на другие элементы, расположенные за ним или под ним на веб-странице.

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

Допустим, у нас есть структура меню с бургер-иконкой, в которой используются вложенные span элементы для создания анимации. Если мы назначаем обработчик клика на всю иконку бургера для открытия меню, то может проявиться неожиданное поведение: меню откроется, но анимация иконки не срабатывает как предполагалось.

<div class="wrapper">
      <div class="burger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <nav class="menu">
        <ul class="menu__list">
          <li class="menu__list-item">
            <a class="menu__list-link" href="">Главная</a>
          </li>
          <li class="menu__list-item">
            <a class="menu__list-link" href="">О нас</a>
          </li>
          <li class="menu__list-item">
            <a class="menu__list-link" href="">Преимущества</a>
          </li>
          <li class="menu__list-item">
            <a class="menu__list-link" href="">Контакты</a>
          </li>
        </ul>
      </nav>
    </div>

Такое поведение может быть связано с тем, что клик фактически попадает не на сам бургер, а на один из вложенных span. И чтобы обеспечить корректную анимацию бургера, мы можем применить pointer-events: none; ко всем span внутри бургера. Это гарантирует, что все события мыши будут улавливаться именно самим бургером, обеспечивая точность и надежность при открытии меню.

.burger span {
  pointer-events: none;
}

⚡️ Навыкиверстальщика | CSS

Несколько рабочих способов для создание градиентой рамки у блочных элементов.

HTML:

 <div class="first-example">
      <div>Example with a box</div>
    </div>

    <div class="second-example">Example with a box</div>

CSS:

.first-example {
  background: linear-gradient(180deg, blue, red, yellow);
  border-radius: 2px;
  padding: 5px;
  color: #fff;
  margin-right: 20px;
}

.first-example > div {
  background-color: #000;
  padding: 20px 40px;
  border-radius: 2px;
}

.second-example {
  border: 5px solid transparent;
  background: linear-gradient(#000, #000) padding-box,
    linear-gradient(180deg, blue, red, yellow) border-box;
  border-radius: 2px;
  padding: 20px 40px;
  color: #fff;
}

⚡️ Навыкиверстальщика | CSS

Container Queries в CSS — это относительно новая концепция, призванная предоставить больше гибкости при стилизации компонентов на базе размера родительского контейнера, а не размера всего вьюпорта, как это делается в медиа-запросах

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

Для использования Container Queries вам нужно сделать следующее:

1. Определение контейнера: Сначала нужно определить контейнер, внутри которого будут срабатывать Container Queries.

.container {
  container-type: inline-size;
}

В этом примере для .container устанавливается свойство container-type, что означает, что этот элемент будет «контейнерным контекстом» для Container Queries.

2. Написание Container Query: Затем вы можете писать стили внутри запроса, используя @container и указывая условия, при которых эти стили будут применяться.

@container (max-width: 992px) {
  .title {
    /* Стили для .title когда родительский .container меньше 992px */
  }
}

Этот @container запрос применится к элементу с классом .title, когда ширина их родительского .container будет менее 992 пикселей.

⚡️ Навыкиверстальщика | CSS

Атрибут aria-label — позволяет добавить описание элементов интерфейса для особых пользователей и улучшить доступность контента.

aria-label особенно полезен в следующих случаях:

1. Когда у элемента нет визуального текста, который экранные чталки могли бы зачитать, например, у кнопок с иконками.
2. Для улучшения контекста и описания для элементов, который понятнее описывает их функцию, чем видимый текст.
3. Чтобы заменить существующую текстовую метку, которая может быть непонятной для пользователей с ограниченными возможностями.

Пример использования aria-label:

<button aria-label="Закрыть" onclick="closeModal()">
  <img src="close-icon.png" alt="">
</button>

В этом примере кнопка содержит только изображение (иконку закрытия), без текстовых подсказок. Чтобы помочь пользователям с ограниченными возможностями понять функцию кнопки, атрибут aria-label используется для предоставления описания действия кнопки — в данном случае "Закрыть". Данный атрибут поможет экранной чталке правильно интерпретировать и озвучить назначение кнопки.

Важно отметить, что aria-label имеет больший приоритет перед другими атрибутами, обеспечивающими доступное описание, такими как alt у тега <img>. Поэтому, если у элемента есть визуальный текст, в большинстве случаев предпочтительнее его использовать, а aria-label применять только тогда, когда текстовых меток нет или они не дают ясного понимания функциональности элемента.

⚡️ Навыкиверстальщика | HTML