HTML5 Data Attributes (data-*)

Использование data-* attributes HTML5 добавил возможность хранить данные напрямую в html коде. При этом эти данные не будут видны пользователю. Data-* attributes позволяет нам хранить дополнительные данные в любых html элементах, не засоряя имена классов.     HTML ситаксис Синтаксис…

Создание подписей для изображений

Здравствуйте, уважаемые читатели! Недавно я столкнулся с необходимостью создать для изображений подписи. И сейчас я хочу рассказать вам, как их сделать. Приступим!   HTML Все весьма просто. Мы добавим подпись в виде span и обернем все в один div. <div…

Как в браузере увидеть скрытый пароль

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

HTML5 History API: синтаксис

С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять записи в историю, реагировать на переходы по истории, изменять записи. В данной статье мы обсудим history API и рассмотрим примеры использования.        …

Как сделать одиночную ссылку или кнопку?

На многих сайтах и приложениях бывает нужно стилизовать кнопку, которая не является частью списка ссылок, и которая стоит отдельно от остального контента. Кнопка наподобие такой часто носит рекламный характер, например, «Кликни, чтобы купить» или «Кликни для загрузки» (ссылка на интересную…

Совет: используйте HTML комментарии к pseudo-элементам

На недавнем W3Conf объяснили, что хотя pseudo-элементы помогли нам добавить декоративное содержание наших страниц, сохраняя при этом наш HTML чистым, но они привели к некоторым вопросам. Инструменты разработчика могут в некоторой степени помочь отследить элементы, но часто динамически добавляемый контент,…

Красивое горизонтальное меню на всю ширину

Добрый день! Часто бывает нужно сделать горизонтальное меню, которое будет растягиваться на всю ширину родительского блока независимого от того, сколько пунктов в нем содержится. Сегодня я бы хотел вам показать, как создавать именно такое меню. Итак, наше меню будет следующим:…