Загрузка...
Шаблон html-страницы с шапкой, подвалом и двумя боковыми панелями по бокам от контента
Классические 3 колонки
Метка: html-css
Выстраивание содержимого
Заголовок, описание и изображение равномерно выстраиваются внутри соседних карточек
Стопка блинчиков
Такой html-макет, обычно называемый sticky footer, часто используется как для веб-сайтов, так и для приложений.
Разорванный блинчик
HTML-макет, который растягивается в зависимости от пространства и привязывается к следующей строке минимального размера.
RAM (Repeat, Auto, Minmax)
Адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами
Адаптивная боковая панель
Макет, в котором для боковой панели указаны минимальный и максимальный размеры, а остальной контент заполняет оставшееся пространство.
Центрирование элемента
Центрирование элемента внутри его родителя одной строкой кода: place-items: center
Классическая сетка для 12 колонок
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat()
Анимация label для текстового input
Рассматривается общий принцип реализации «прыгающих» подписей к полям формы — преобразования placeholder текстового поля в label снаружи него с помощью только CSS и HTML.
aspect-ratio [quirksmode]
Особенности работы css-свойства aspect-ratio, которое определяет соотношение между шириной и высотой контейнера. Примеры, когда aspect-ratio игнорируется и не применяется, работает не так, как ожидалось или не работает совсем.
CSS для настройки HTML-элемента SELECT
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
Уменьшающаяся при прокрутке «шапка» страницы без 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 Scroll Snap
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Как работает z-index
CSS свойства z-index, position: relative и absolute и взаимное расположение контейнеров, как всё этот вместе работает: наглядно и понятно.
CSS центрирование элемента внутри контейнера
Как центрировать html-элемент по горизонтали и вертикали с помощью двух-трёх строк CSS.