CSS-border с анимированным градиентом

Здесь речь пойдёт о применении градиентной заливки для CSS-border и её анимации для перемещения цветов градиента вдоль границ блока. Самый очевидный способ реализации рамки с градиентом — установить какой-либо тип CSS-градиента в качестве значения CSS-свойству border-image: div { border: 3em solid; border-image: linear-gradient(to right, green, yellow) 1; } See this code CSS Gradient Border on…

https://xhtml.ru/2021/css/animating-a-css-gradient-border/

@property: наделение CSS-переменных сверхспособностями

CSS Houdini — это общий термин, который охватывает набор низкоуровневых API-интерфейсов раскрывающих части механизма рендеринга CSS и предоставляющих разработчикам доступ к объектной модели CSS. Это огромное изменение для экосистемы CSS, потому что оно позволяет разработчикам указывать браузеру, как читать и анализировать пользовательский CSS, не дожидаясь, пока поставщики браузеров предоставят встроенную поддержку этих функций. Одним из…

https://xhtml.ru/2021/css/at-property/

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

Выпрыгивающий из текстового поля placeholder и переходящий в его подпись (label) выглядит эффектно и давно применяется в веб-формах. Существует множество вариаций этого эффекта, но принцип реализации у них схожий. Когда поле ввода текста пустое, его подпись placeholder размещается внутри и подсказывает пользователям, какое ожидается значение. Как только input получает фокус, placeholder выскакивает наружу, масштабируется и…

https://xhtml.ru/2021/html/how-to-create-fancy-jumping-text-input-labels/

Обнаружение сенсорного ввода для 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/