Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (для Chrome и Safari), и стандартизированные свойства scrollbar-width совместно с scrollbar-color (для Firefox)
Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Макет сетки календаря — идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Загрузка...
