Верстка \ 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, мы рассмотрим стили или, если точнее — селекторы псевдо-классов, которыми можно воспользоваться для выбора полей ввода в различных состояниях. Если вы еще не читали эту серию статей, пожалуйста, начните с первой и убедитесь в том, что понимаете основные концепции разметки.

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

Верстка \ HTML5

HTML5 Формы: разметка

От автора: Это первая часть серии из трех частей о веб-формах на HTML5. Мы раскроем основы разметки в этой статье, прежде чем перейти к стилизации и API JavaScript валидации на клиенте. Я рекомендую прочесть эту статью даже если вы уже знакомы с формами – там много атрибутов и приемов.

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