Обнаружение сенсорного ввода для touchscreen или hover для мыши

Ещё совсем недавно информации о размерах экрана было достаточно для предположения, например, что мобильные устройства будут использовать сенсорный ввод для touchscreen, а пользователи устройств с экраном большего размера, вероятнее всего, используют для управления курсором мышь. Разнообразие устройств с помощью которых можно просматривать веб-сайт не позволяет полагаться только на размеры области просмотра (viewport), как на фактор,…

https://xhtml.ru/2021/css/detecting-hover-capable-devices/

CSS clip и mask для всплывающих подсказок

Вырезание (clipping) и маскирование (masking) присутствуют в CSS уже продолжительное время и имеют довольно приличную поддержку браузерами. В этой статье будут рассматриваться техники вырезания и создание маски для всплывающих подсказок (tooltip), например, отображающих назначение ссылок в тексте. Дизайн этих всплывающих подсказок отличается в зависимости от их содержимого: Один дизайн — это всплывающая подсказка, с простым…

https://xhtml.ru/2021/css/tooltips-with-css-clipping-and-masking/

Классическая сетка для 12 колонок

Сетка разбита на 12 ячеек в ряду, где вы можете равномерно размещать области на дорожках. Сетка 12 колонок Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat(). Например использование: repeat(12, 1fr); реализует сетку из 12 ячеек в ряду по 1fr каждая. .parent { display: grid; grid-template-columns: repeat(12, 1fr); } .child-span-12…

https://xhtml.ru/2022/layout-patterns/12-span-grid/

Центрирование элемента

Для центрирования элемента внутри его родителя можно использовать CSS-свойство place-items: center. Сперва надо указать сетку в качестве метода отображения, а затем добавить CSS-свойство place-items: center для того же элемента. place-items — это сокращение для одновременной установки свойств align-items и justify-items. Установка значения center одновременно для align-items и justify-items разместит элемент в центре контейнера. .parent {…

https://xhtml.ru/2022/layout-patterns/super-centered/

Адаптивная боковая панель

Адаптивная боковая панель В этом примере используется функция minmax() для макетов сетки. Здесь эта функция используется для установки минимального размера боковой панели в 100 пикселей, но на больших экранах это значение увеличивается до 25% ширины. Таким образом боковая панель всегда будет занимать 25% горизонтального пространства своего родителя, пока эти 25% не станут меньше 100 пикселей.…

https://xhtml.ru/2022/layout-patterns/sidebar/

RAM (Repeat, Auto, Minmax)

RAM (Repeat, Auto, Minmax) В этом примере объединены некоторые концепции создания адаптивного макета с автоматически размещаемыми и гибкими дочерними элементами. Ключевые термины, которые нужно запомнить, это повторение (repeat), заполнение(auto) и minmax(), которые составляют аббревиатуру RAM. Все вместе это выглядит так: .parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } Здесь используется repeat() с использованием ключевого…

https://xhtml.ru/2022/layout-patterns/repeat-auto-minmax/

Разорванный блинчик

Это обычный html-макет для маркетинговых сайтов, например, может содержать три элемента в ряд, обычно с изображением, заголовком, а затем некоторым текстом, описывающим некоторые особенности продукта. На небольших экранах предпочтительнее, чтобы они красиво сжимались и расширялись по мере увеличения размера экрана. При использовании flexbox для такого эффекта, не понадобятся медиа-запросы для настройки размещения элементов при изменении…

https://xhtml.ru/2022/layout-patterns/deconstructed-pancake/

Стопка блинчиков

Макет: стопка блинчиков В отличие от «разорванного блинчика», этот пример не переносит дочерние элементы при изменении размера экрана. Этот макет, обычно называемый sticky footer (липкий нижний колонтитул), используется для веб-сайтов (в частности для одностраничных приложений) и мобильных приложений (нижний колонтитул обычно представляет собой панель инструментов). При добавлении компоненту display: grid получится сетка с одним столбцом,…

https://xhtml.ru/2022/layout-patterns/pancake-stack/

Выстраивание содержимого

Макет карточек с выстроенным содержимым Основной момент, демонстрируемый здесь — это использование CSS-свойства justify-content: space-between, которое размещает первый и последний дочерние элементы по краям контейнера, а оставшееся пространство равномерно распределяется между остальными элементами. Контейнер карточки использует режим отображения flexbox, а направление его содержимого с помощью flex-direction: column устанавливается по вертикали. Заголовок, описание и блок изображения…

https://xhtml.ru/2022/layout-patterns/line-up/

Классические 3 колонки

Классический 3-х колоночный макет У этого макета html-страницы есть верхний и нижний колонтитулы (шапка и подвал), левая и правая боковые панели, основной контент. Чтобы написать такую сетку с помощью всего одной строки кода, можно использовать CSS-свойство grid-template. Это позволяет одновременно устанавливать параметры строк и столбцов шаблона. Пара свойство и значение: grid-template: auto 1fr auto /…

https://xhtml.ru/2022/layout-patterns/classic-3-cols-layout/

Древовидные представления, только html и css

Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Программное обеспечение для специальных возможностей будет показывать дерево в виде списков, вложенных в раскрывающиеся виджеты, а взаимодействие с клавиатурой поддерживается автоматически.

See this code tree-views html+css only on x.xhtml.ru.

HTML

HTML разметка начинается с простых вложенных списков:



Планеты гиганты…

https://xhtml.ru/2022/html/tree-views/