Верстка \ HTML5

Шпаргалка: простая валидация форм в HTML5

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

Продолжить чтение

Верстка \ HTML5

20 HTML элементов, улучшающих семантику текста

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

Продолжить чтение

Верстка \ HTML5

Оформление кроссбраузерных элементов input с типом range с помощью CSS

От автора: В этой статье мы познакомимся с инструментом range.css, предназначенным для оформления элемента <input type=»range»>. Данный тип элемента input является непростым в плане оформления, потому что требует непривычного сочетания стандартных селекторов и свойств с нестандартными селекторами, свойствами и вендорными префиксами.

Продолжить чтение

Верстка \ HTML5

Размытие меню с помощью CSS3 переходов

От автора: Каждый из нас оказывался в ситуации, когда нужно сделать ответственный выбор, находясь онлайн: оформление заказа, голосование, удаление аккаунта. Эти неизменные действия очень часто требуют промежуточного шага, небольшого напоминания, которое позволило бы удостовериться в том, что пользователь действительно хочет продолжить или завершить действие. Чтобы предотвратить возникновение ошибок, подобные напоминания обычно делают в виде модального окна: элемент пользовательского интерфейса, который перехватывает управление страницей и заставляет пользователя сделать некий выбор (обычно Да/Нет) перед продолжением.

Продолжить чтение

Верстка \ HTML5

Кроссбраузерное оформление для HMTL5 элемента input с типом range

От автора: Ползунок выбора диапазона (range) является одним из новых типов у элемента input, представленных в спецификации HTML5. Данный тип позволяет осуществить выбор какого-то числового значения в указанном диапазоне. Браузерами предусмотрено отображение данного типа в виде слайдера с ползунком. Это очень интуитивный элемент пользовательского интерфейса, который очень часто встречается в приложениях. Мы можем передвигать ползунок вправо или влево, чтобы выбрать нужное значение в рамках заданного диапазона.

Продолжить чтение

Верстка \ HTML5

Обзор HMTL5 элемента time

От автора: Время – одна из немногих известных нам вещей, которая является бесконечной. Люди, также, как и животные и растения, зависят от времени, начиная с самого их появления.

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

Продолжить чтение

Верстка \ HTML5

Создаем интерактивные HTML5 видео

От автора: Элемент video в HTML5 позволяет вам вставлять видео на ваш сайт также легко, как и изображения. И поскольку все основные браузеры поддерживают тег video c 2011 года, он является наиболее надежным способом сделать так, чтобы люди увидели ваши видеоролики.

Продолжить чтение

Верстка \ HTML5

Использование тэга HTML5 picture для адаптивных изображений

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

 

Продолжить чтение

Верстка \ HTML5

Формы HTML5: CSS

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

Продолжить чтение