Главная » Архив меток: HTML&CSS

Архив меток: HTML&CSS

Как использовать переменные в CSS

От автора: CSS переменные или кастомные свойства представляют собой определенные пользователем значения, которые можно задать один раз, а использовать много раз по коду. С их помощью легче управлять цветами, шрифтами, размерами и анимацией, а также переменные позволяют добиться единообразия по всему приложению. К примеру, через CSS свойство можно задать цвет бренда (—primarycolor: #7232FA) и использовать это значение в любых компонентах ...

Читать далее »

Создание адаптивного мобильного меню на CSS без JavaScript

От автора: навигационное меню, которое является простым, лаконичным и интуитивно понятным, имеет важное значение для оптимизированного взаимодействия с пользователем веб-сайта. Отзывчивость меню также является ключевым фактором. На момент написания этой статьи более 54 процентов веб-трафика во всем мире приходится на мобильные устройства. Благодаря адаптивному дизайну, ориентированному на мобильные устройства, разработчики начинают с наименьшего размера экрана, а затем постепенно увеличивают масштаб, ...

Читать далее »

Создание компонентов пользовательского интерфейса с SVG и CSS

От автора: SVG — это не только иконки и иллюстрации, в нем есть множество скрытых возможностей, о которых разработчики иногда забывают. Существует множество вариантов, в которых использование SVG имеет больше смысла по сравнению с CSS. Например, создание круговой анимации загрузки или применение масок к изображениям. Это не означает, что использование CSS в таких случаях невозможно, но иногда может быть сложно ...

Читать далее »

Анимация мобильных меню с помощью CSS

От автора: экраны мобильных устройств не такие широкие, как экраны настольных компьютеров и ноутбуков. При создании веб-сайтов часто необходимо разработать средства для отображения меню сайта и навигации для пользователей мобильных устройств. Существуют различные способы отображения пунктов меню на экране мобильного устройства. Один из самых популярных способов — скрывать меню с экрана и выводить его только при необходимости или запросе. Во ...

Читать далее »

Адаптивные макеты без медиа-запросов!

От автора: мой друг шутил: HTML уже адаптивен. Это делают дизайнеры. Это странное мнение, но в целом правильное. Если вы напишете ванильный HTML с правильной семантической разметкой, он, по крайней мере, ПРИГОДЕН для UІ. Возможно, это некрасиво, возможно, имеет не самый желанный вид для пользователей, но допустимо. Естественное обертывание традиционных элементов часто может быть лучше, если мы просто позволим ему ...

Читать далее »

Как работает CSS

От автора: как веб-разработчики, мы используем CSS ежедневно, но знаете ли вы, как все работает под капотом? Как нам получить красивые веб-страницы со всеми цветами и стилями? Честно говоря, я использую CSS ежедневно и не очень хорошо об этом знал. Итак, я провел небольшое исследование, просмотрел несколько видео и пишу эту статью, пытаясь собрать все в одном простом блоге. Перед ...

Читать далее »

Рекомендации по встраиванию сторонних веб-виджетов

От автора: сторонние веб-виджеты — это наиболее простая интеграция функций в веб-приложениях. Но некоторые из этих внедрений могут создать узкие места в производительности и отрицательно повлиять на производительность приложения. В этой статье я расскажу, как определить влияние сторонних виджетов, а также передовой опыт их использования в веб-приложениях. Что такое сторонние встраиваемые ресурсы? Обычно мы можем найти веб-вставки для видео, сообщений ...

Читать далее »

Давайте поговорим о вкладках HTML

От автора: в прошлом году я участвовал в проекте Open UI, посвященном выяснению того, как получить собственный &tl;tabs> элемент в HTML. Это была команда людей с разным опытом; авторы спецификаций, производители браузеров, разработчики и обычные практики, такие как я. Open UI — это сообщество, поэтому мы технически не можем создавать HTML (по юридическим причинам), но мы можем представить исследования рабочим ...

Читать далее »

Как стилизовать любое поле ввода — советы и методы

От автора: поле ввода в HTML простое, мощное и выполняет то, для чего предназначено. Имея более 30 вариантов атрибутов, input является одним из самых надежных HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, прилагается много усилий, чтобы сделать их привлекательными и простыми для взаимодействия, но многое может пойти не так. Базовая разметка Хорошее практическое правило и на самом деле ...

Читать далее »

Анимация иконок Font Awesome и другие возможности

От автора: одним из наиболее популярных иконочных шрифтов является набор иконок Font Awesome. Данный набор использовал, пожалуй, практически каждый веб-разработчик. Однако, многие используют лишь малую часть возможностей набора иконок Font Awesome. На самом деле Font Awesome предлагает много дополнительных возможностей по манипуляции иконками, например, управление размером с помощью дополнительных классов, вращение иконок, выравнивание, анимация и другие. В этом уроке будет ...

Читать далее »