Пишем код

Сенсорные экраны стали неотъемлемой частью современных устройств, поэтому умение обрабатывать свайпы (движения пальца по экрану) — полезный навык для веб-разработчиков. Свайпы позволяют реализовать удобное листание слайдов, галерей или каруселей без кнопок и скроллов. В этой статье приведён простой пример кода на JavaScript, который определяет направление и расстояние горизонтального свайпа. Основная идея События, связанные с касаниями, в браузере называются: С помощью этих трёх событий можно вычислить, насколько далеко и в каком направлении двигался палец пользователя. Пример кода Как это работает Где это применить Итог Этот небольшой пример демонстрирует, как просто можно реализовать обработку свайпов с помощью нативного JavaScript без сторонних библиотек. […]

В этой статье разберём два основных способа вставить видео на страницу: 🧩 Часть 1. Встроенное или загруженное видео: тег <video> Если у вас есть собственное видеофайл — например, promo.mp4, — то самый правильный способ вставить его в HTML — это использовать тег <video>. Этот тег появился в HTML5 и позволяет встроить медиаконтент без плагинов вроде Flash. Простейший пример: Тут всё просто: Если не указать controls, видео просто не будет иметь интерфейса, и пользователь не сможет им управлять. 🔧 Основные атрибуты тега <video> Пример с несколькими источниками Чтобы видео корректно работало во всех браузерах, можно указать несколько форматов: Если браузер не […]

Для того, чтоб пользователь мог передать на сервер какие-то данные на сервер. Для этого используются формы передачи данных на сервер. Если рассматривать формы на уровне html, то для реализации различных возможностей передачи данных существует множество элементов, из которых строится форма и их атрибутов. Так же есть свои особенности css стилизации и обработки данных на стороне клиента. В этой статье я разберу все html элементы форм, их атрибуты и особенности css стилизации. Так же рассмотрим обработку данных на стороне браузера с помощью JavaScript. В результате данную статью можно использовать как справочник. Для понимания того, как работает форма и какие файлы помимо […]

Готовое css решение для окрашивания текста в цвета градиентом и добавления обводки с пояснениями. В графических редакторах довольно легко добавить тексту такие эффекты, как градиентный цвет и обводку. Тексты с этими эффектами при грамотном подходе могут выгодно отличать дизайн от аналогов и стать его изюминкой. Это создает для дизайнеров соблазны применять данные эффекты. Но на этапе верстки реализация градиента и обводки текста может стать проблемой. Дело в том, что в css градиент задается с помощью значения, записанное в функции linear-gradient для свойств background и background-image.  Для свойства color, с помощью которого задается цвет текста linear-gradient не работает. С обводкой дела […]

В большинстве случаев весь контент на странице ограничен по ширине. Открывая веб страницу на ПК мониторе можно обратить внимание на то, что весь контент страницы расположен по центру страницы в полосе определенной ширины, а по бокам имеются отступы. На некоторых сайтах (например You Tube) контент растягивается на всю ширину экрана. Но такой подход используется намного реже. Если открыть ту же страницу на экране достаточной ширины другого размера (ширины), то вы увидите то, что ширина контента не поменяется. Но порой возникает необходимость растянуть какой-то элемент контента до одного из краев экрана. При этом отступ с противоположной стороны этого же блока должен […]

Функция clamp позволяет использовать относительные единицы измерения в css в заранее ограниченном диапазоне размеров элементов. Это означает, что помимо размера, который устанавливается относительно размера области просмотра, можно установить максимальный и минимальный размеры элемента. В статье о единицах измерения в css освещался недостаток использования относительных единиц, который заключался в излишнем росте размеров элементов на большом экране. Применение функции clamp() решает эту проблему. Использование Функция записывается при помощи ключевого слова clamp, после которого идут скобки. В скобках записывается три аргумента. clamp(MIN, VAL, MAX); Использование функции позволяет сократить количество кода за счет того, что данный подход позволяет исключить использование медиа запросов. Но при […]

Единиц измерения в вебе существует достаточно большое количество. Я же расскажу о тех, которые часто применяются в верстке. Все единицы измерения в css можно разделить на абсолютные и относительные. Абсолютные единицы измерения Абсолютные единицы являются таковыми потому, что с помощью них задаются жесткие размеры элементам на странице. При этом фактические размеры не будут зависеть от контекста окружения — ширины, высоты экрана. К абсолютным единицам относятся: В разработке сайтов и приложений широко применяются px. Пиксель является самой понятной и популярной единицей в вебе. Эта единица не имеет физических размеров. Пиксель — это минимальная точка изображения, из которых оно состоит. Каждый пиксель […]