Загрузка...
Как назначить CSS-свойства селектору-родителю, в зависимости от существования элемента внутри него и управлять свойствами соседних HTML-элементов
CSS-селектор :has() для родительского элемента
CSS: оформление скроллбаров 2022
Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)
Захват экрана пользователя и запись видео
Для совместного использования вкладок, окон и экранов на веб-платформе используется Screen Capture API (API захвата экрана).
Древовидные представления, только html и css
Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Классические 3 колонки
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Выстраивание содержимого
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Стопка блинчиков
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
Разорванный блинчик
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
RAM (Repeat, Auto, Minmax)
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Адаптивная боковая панель
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Центрирование элемента
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Классическая сетка для 12 колонок
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
CSS clip и mask для всплывающих подсказок
Несколько техник вырезания и использования слоёв маски для формирования фигуры всплывающих подсказок с произвольным хвостиком-стрелкой.
Обнаружение сенсорного ввода для touchscreen или hover для мыши
Как CSS медиа-запросами hover и pointer определить наличие touchscreen и использование сенсорного ввода или управление курсором с помощью мыши.
Анимация label для текстового input
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
box-shadow: CSS-генератор мягких теней
@property: наделение CSS-переменных сверхспособностями
Расширение возможностей настраиваемых свойств с помощью установки для них семантического значения — типизация CSS-переменных
CSS-border с анимированным градиентом
Использование в border-image CSS-градиентов и их анимация для перемещения цветов градиента вдоль рамки блока.
aspect-ratio [quirksmode]
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
Изменение размеров изображения с учетом его содержимого в JavaScript
Может быть применено, когда дело доходит до изменения пропорций изображения (например, уменьшения ширины при сохранении высоты), а также когда потеря некоторых частей изображения нежелательна. Использует алгоритм Seam Carving (вырезание швов).