Метка: html-css

CSS: оформление скроллбаров 2022

scrollbar css

Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)

Анимация label для текстового input

Рассматривается общий принцип реализации “прыгающих” подписей к полям формы – преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.

aspect-ratio [quirksmode]

aspect-ratio: 16/9

Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.

Выезжающая боковая панель (sidebar)

sidebar

Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах

CSS-свойство aspect-ratio

Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.

CSS Scroll Snap

scroll-snap-type

Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.