Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным. Итак, начнем с примера для тех,…

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

Первая Belarusian IT Awards: лучших представителей белорусской ИТ-отрасли оценят по достоинству!

С 10 февраля по 28 марта белорусское ИТ-сообщество вместе с экспертным жюри будут решать, какие компании, сообщества и специалисты внесли наибольший вклад в развитие ИТ-отрасли страны. Ежегодная премия Belarusian IT Awards (www.itawards.by) организована порталом о работе в ИТ dev.by. В…

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

Best IT Companies 2013: Сотрудники ИТ-компаний в третий раз выберут лучших работодателей за прошедший год

С 10 февраля по 28 марта проходит третий ежегодный конкурс «Лучшие ИТ-компании Беларуси глазами сотрудников» — BestCompanies 2013 bestcompanies.by Организатор конкурса — портал о работе в ИТ dev.by. В период с 10 февраля по 28 марта ведущие ИТ-компании страны будут…

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

Frontend Dev Conf’14 — конференция frontend разработчиков и UI-специалистов

Пожалуй самая крупная техническая конференция Frontend Dev Conf’14 , посвященная frontend разработке, пройдет в Минске 19 апреля. 14 докладчиков из 9 стран мира выступят с узкотехническими докладами и поделятся своим опытом качественной frontend разработки. Программный комитет конференции — профессиональное сообщество…

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

Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении лейаутов в css. Но прежде чем перейти к его описанию, давайте выясним, что же не так со способами верстки, которыми мы пользуемся сейчас? Любой верстальщик знает несколько…

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


pointer-lock

Pointer Lock API в html5. Зачем он нужен и как с ним работать?

Pointer Lock — это браузерный API, позволяющий создавать интерфейсы для работы с мышкой на основе ее относительных перемещений, а не только абсолютной позиции курсора. Давайте разберем на примере. Допустим, мы хотим сделать браузерный шутер от первого лица, а-ля Quake. Герой…

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


140byt.es — полезный javascript, который вмещается в один твит.

Недавно наткнулся на сайт, который показался мне довольно интересным 140byt.es. Идея сайта — уместить некоторую готовую к использованию функциональность в 140 символов javascript кода, т.е. одно twitter сообщение. Казалось бы, ну что можно сделать в таком объеме кода. Но на…

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


Web Audio API — новые возможности генерации, обработки и объемного распределения звука в браузере.

Web Audio API — одна из новинок, которая значительно расширяет возможности web приложений при работе со звуком. Это мощнейший инструмент, без которого Вам сложно будет обойтись в будущем при разработке современных игр и интерактивных веб приложений. API достаточно высокоуровневый, продуман…

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


Краткий обзор методов фильтрации изображений c использованием html5, css3, javascript, svg

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

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


сalc() в CSS3. Великолепные возможности для responsive верстки.

calc() довольно новая и еще совсем редко используемая функциональность в CSS3. Она позволяет задавать несложные арифметические операции непосредственно в описании стилей с участием всевозможных единиц измерения. Это очень удобно для вычисления размеров, позиций, трансформаций.. и даже цветов элементов. Давайте разберемся,…

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


javaScript classList API

javaScript classList API — идеальный способ добавления, удаления, переключения и проверки классов элемента в html5

Наверное, каждый, кто хоть немного работал с JavaScript, думал о том, как упростить себе жизнь при работе с классами DOM элементов. Ну например у элемента есть 2-3 класса и вам нужно добавить еще один, проверить наличие какого-либо класса или удалить…

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

Fullscreen javascript API или как развернуть страницу на весь экран c html5.

Давайте познакомимся с еще одним, довольно молодым API, необходимость которого уже давно терзает умы разработчиков игр, видеосайтов и прочих полноэкранных сервисов. Fullscreen javascript API пока является черновиком, но уже поддерживается в chrome, safari, ff и опере. Internet-explorer (включая Ie10) как…

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


Battery javascript API — состояние и статус зарядки батареи устройства c html5

Давайте рассмотрим Battery API — еще одну новинку в javaScript, которая появиласть на свет с развитием html5 и мобильных девайсов. Задокументирована она совсем недавно (12.2012) и пока доступна только для тестирования только в Firexfox (мобильном и десктопном). Разработчики Chrome обещают…

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


vibration-api

Vibration javascript API — управляем вибрацией устройства в мобильных браузерах

Многие из новых js API, которые появляются в браузере в последнне время, скорее ориентированы на мобилные устройства, чем на десктопные браузеры. Vibration API — не исключение (позволяет управлять вибрацией устройств). Ну.. и какие мысли полезли тебе в голову, наш юный…

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

Захват изображения с камеры в браузере с помощью getUserMedia (с зеркальным отображением)

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

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


Что такое base64 и зачем он нужен в веб разработке?

Base64 — способ кодирования произвольных двоичных данных в ASCII текст. По своей сути кодирование очень простое. Каждые шесть бит на входе кодируется в один из символов 64-буквенного алфавита. «Стандартный» алфавит, который для этого используется — это A-Z, a-z, 0-9,+,/ и…

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


visibilityChange или как отследить виден ли таб с вашей страницей в браузере пользователя в текущий момент.

В браузерах всегда не хватало какого-нибудь индикатора того, находится ли страница в активном табе. Вот несколько примеров того, как это можно использовать: У вас на сайте есть видео и вы хотите поставить его на паузу, пока пользователь сделал неактивным таб…

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


Что такое requestAnimationFrame?

Каждый, кто хоть немного пользуется javascript, пытался реализовать анимацию. Это могут быть меню-аккордеоны, выпадающие меню, что-то движущиеся, сделанное на canvas или svg или в крайнем случае снег, который летает на доброй половине сайтов перед новым годом ( не нравится мне…

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

Бегущая строка с эффектом светодиодной панели (css3 animation)

Как-то раз появилась идея сделать эмуляцию светодиодной панели с помощью CSS animation. Первое, что пришло на ум, было найти подходящий ttf шрифт (точечный или эмуляцию того, что используется в электронных часах) и собственно пустить его в циклическую линейную анимацию по…

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

viewport meta tag, масштабирование веб страниц в мобильных браузерах

Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать,…

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

Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах

Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…

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


Формат ссылки для отправки SMS/MMS в мобильных браузерах

Формат ссылки для отправки SMS/MMS в мобильных браузерах (href=»sms:…»)

Мы уже писали об URI-схемах для мобильных звонков тут. Давайте рассмотрим, как можно отправить sms. С веб-страницы, вы можете открыть приложение для отправки SMS на телефоне пользователя при помощи uri-схем, как показано ниже: html sms:<phone_number>[,<phone-number>]*[?body=<message_body>] Ссылка содержит разделенный запятыми список…

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

Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства…

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


Devicemotion javascript API — Как определить параметры движения утройства в браузере с помощью javascript

В мобильных (и не только) браузерах не так давно появилась возможность определить ускорение устройства в разных плоскостях. Для этого в устройствах имеются акселерометры. Эта функциональность может быть особенно полезна разработчикам браузерных игр, мобильных браузерных приложений и т.п. как и deviceorientation…

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


Deviceorientation — Как в браузере определить ориентацию устрoйства в пространстве c помощью javascript

В современных мобильных (и не только) браузерах появилась возможность определить точную ориентацию устройства в пространстве. Практически все производители мобильных устройств, на сегодняшний день устанавливают гироскопические модули. Эта функциональность может быть особенно полезна разработчикам браузерных игр, мобильных браузерных приложений и т.п.…

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


Как узнать загружена ли страница во фрейм или в основное окно браузера?

Часто бывает необходимо скрыть часть контента, при загрузке страницы во фрейм или что-то подобное. Это можно легко узнать с помошью следующего javascript: javascript if (window!=window.top) { /* страница загружена во фрейм */ } else { /* страница загружена в основное…

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

Выделение текста на странице средствами css3

Как изменить цвет и фон выделения на сайте в html5

Изменить цвет и фон выделения текста со стандартного синего (а еще хуже оранжевого, в убунте например, :) ) можно довольно просто с помощью псевдоселектора ::selection (поддерживается IE9+, Opera, Chrome и Safari). Стоит добавить, что только несколько css свойств могут быть…

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

Проект создан в GanttPRO
Программа для управления проектами онлайн с помощью диаграмм Ганта
Спасибо за лайк в FACEBOOK
html5.by
Подписывайтесь на новости вконтакте
Последние статьи от html5.by