Загрузка...
Как назначить CSS-свойства селектору-родителю, в зависимости от существования элемента внутри него и управлять свойствами соседних HTML-элементов
CSS-селектор :has() для родительского элемента
Рубрика: CSS
CSS: оформление скроллбаров 2022
Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)
CSS clip и mask для всплывающих подсказок
Несколько техник вырезания и использования слоёв маски для формирования фигуры всплывающих подсказок с произвольным хвостиком-стрелкой.
Обнаружение сенсорного ввода для touchscreen или hover для мыши
Как CSS медиа-запросами hover и pointer определить наличие touchscreen и использование сенсорного ввода или управление курсором с помощью мыши.
@property: наделение CSS-переменных сверхспособностями
Расширение возможностей настраиваемых свойств с помощью установки для них семантического значения – типизация CSS-переменных
CSS-border с анимированным градиентом
Использование в border-image CSS-градиентов и их анимация для перемещения цветов градиента вдоль рамки блока.
aspect-ratio [quirksmode]
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
Как запускать CSS-анимацию при прокрутке страницы
Пошаговое руководство по запуску CSS-анимации при появлении HTML-элемента в видимой части окна, во время скролла, с помощью Intersection Observer API.
CSS для настройки HTML-элемента SELECT
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
CSS для настройки текста поверх изображений
Улучшение читаемости текста, расположенного над фоновым изображением, с использованием разных техник комбинирования градиентов, прозрачности подложки и теней.
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
Уменьшающаяся при прокрутке “шапка” страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Выезжающая боковая панель (sidebar)
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Календарь с помощью CSS-grid в несколько строк кода
Макет сетки календаря – идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Адаптивная CSS-grid сетка в 3 колонки с помощью 3-х CSS-свойств
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Float-блоки по углам контейнера c текстом вокруг
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
CSS-свойство aspect-ratio
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.
Руководство по CSS-переменным
Настраиваемые CSS-свойства для каскадных переменных, о которых давно просили, но которые всё ещё недостаточно используются, предлагают революционные возможности для совместной работы и повторного использования кода.
CSS Scroll Snap
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.