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

Свойство 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%, 10...

CSS функции min() и max() Позволяют определять минимальное или максимальное значение элемента. Функция min() возвращает наименьшее значение из набора аргументов. Это позволяет задать значение, которое будет адаптироваться к условиям, но не превысит заданный максимум. Пример использования: width: min(100vw, 600px); В этом примере ширина элемента будет равна 100% ширины окна просмотра (100vw), но не более 600 пикселей. Это означает, что на экранах шириной более 600 пикселей ширина элемента будет о...

Свойство mix-blend-mode Определяет, как цвета и изображения в элементе должны смешиваться с его фоном или содержимым В нашем примере рассмотрим эффект наложения цвета с картинкой с помощью данного свойства 👆 ⚡️ Навыкиверстальщика | CSS

@media (any-hover: hover) Позволяет отключить ховер эффект на устройствах которые не имеют функциональности ховера 👇 @media(any-hover: hover) { .btn:hover { background-color: #fff; color: #000; } } Зачем вообще отключать ховер? Самое очевидное - улучшения производительности Отключение ховера на устройствах без поддержки может помочь улучшить производительность, поскольку браузеру не нужно обрабатывать события ховера и применять связанные стили, что может сэкономить ресурсы и ускорить отзывчивос...

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

Различие между CSS свойством box-shadow и filter: drop-shadow box-shadow - позволяет добавить тень вокруг рамки элемента, а также задать смещение, размытие и цвет тени. filter: drop-shadow - применяет тень к содержимому элемента, а не к его границам, и позволяет задать так же: смещение, размытие и цвет тени ⚡️ Навыкиверстальщика | 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: #73a...

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

CSS свойство columns используется для создания многоколоночного текстового макета. Это позволяет разделить текст на колонки, что особенно полезно для улучшения оформления текстового контента на сайте Вот некоторые особенности и возможности свойства columns в CSS: 1. Разделение текста на колонки: - Свойство columns позволяет задать количество колонок и их ширину для разделения текста. - Текст будет автоматически распределен по заданным колонкам 2. Контроль над колонками: - Вы можете настроить раз...

CSS Свойство outline Задаёт внешнюю линию вокруг элемента, не занимая при этом пространства и не изменяя размер элемента. - Отличается от border тем, что не влияет на расположение или размер элемента. Значения: - outline-width — Толщина контура. - outline-style — Стиль контура. Например: solid, dotted, dashed - outline-color — Цвет контура. Можно указать любой цвет в форматах цвета CSS, например: red, #FF0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5). - outline-offset — Отдельное свойство, задающее ...