Загрузка...
Как назначить CSS-свойства селектору-родителю, в зависимости от существования элемента внутри него и управлять свойствами соседних HTML-элементов
CSS-селектор :has() для родительского элемента
Метка: css3
CSS: оформление скроллбаров 2022
Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)
@property: наделение CSS-переменных сверхспособностями
Расширение возможностей настраиваемых свойств с помощью установки для них семантического значения – типизация CSS-переменных
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
Уменьшающаяся при прокрутке “шапка” страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Практические примеры обмена данных между CSS и JavaScript с помощью CSS-переменных. Передача значений настраиваемым CSS-свойствам из Javascript.
Руководство по CSS-переменным
Настраиваемые CSS-свойства для каскадных переменных, о которых давно просили, но которые всё ещё недостаточно используются, предлагают революционные возможности для совместной работы и повторного использования кода.
CSS Scroll Snap
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Три логические CSS-функции: min (), max () и clamp ()
Узнайте, как управлять размерами элементов, поддерживать правильный интервал и реализовывать гибкую типографику с помощью этих хорошо поддерживаемых CSS-функций.
CSS свойство clip-path
clip-path создает ограниченную область, которая определяет какая часть элемента останется видимой.
CSS border-radius
border-radius — это CSS-свойство, которое определяет, как скругляются границы блока.
CSS: max-width с разными единицами измерения
Примеры применения различных CSS единиц измерения длины для обозначения максимальной ширины контейнера.
CSS: современный способ оформления скроллбаров
Настройка полосы прокрутки, цвет scrollbar и стилизация скроллбара, как изменить стиль полосы прокрутки
Фиксирующаяся при скролле панель навигации, только CSS
Как при прокрутке закрепить панель навигации только с помощью CSS и не скроллить (sticky navbar) ее вместе с контентом: position: sticky и scroll-margin-top
Когда в CSS использовать rem, em, px, или что-то другое
Использование только пикселей для CSS-размеров шрифта, контейнеров, отступов, позиционирования и пр. – путь простой, но тупиковый. Когда и какие единицы измерения лучше использовать
CSS многоточие после нескольких строк
CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.
Набор переключателей на чистом CSS
MoreToggles.css – это библиотека на чистом CSS, которая предоставляет большое количество привлекательных переключателей. Вам нужно только добавить название CSS-класса для div.
Маскированный и слоёный CSS градиенты
Небольшой трюк с маской и слоёным градиентом (CSS linear-gradient) для четырёх углов контейнера.
Пользовательские предпочтения: prefers-color-scheme
CSS prefers-color-scheme это медиа-запрос, который определяет текущую настройку темы операционной системы пользователя.
Делаем CSS треугольники
Примеры реализации треугольников с помощью CSS