Posts in "Урок" category

Эффект Motion Blur с помощью SVG

MotionBlur

Сегодня мы рассмотрим, как создать эффект motion blur и применить его к анимациям CSS с помощью SVG.

Демо (рус.) Посмотреть на GitHub

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

Как Product Hunt помог мне сформировать список из 12,989,483,288+ подписчиков за 20 минут

12989483288+

Идея

Я посмотрел на свои Apple Watch. Время было 15:32, тихоокеанское время… так как я живу в Кремниевой долине.

Я подумал:

Что я могу сделать такого, что в течение следующих 20 минут принесет мне быстрорастущий показатель ROI без траты времени на KPI или API или PHP или поиск настоящей работы.

И затем меня осенило:

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

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

notifications

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

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо, чтобы понять, чем мы будем заниматься.

Демо (рус.) Посмотреть на GitHub

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

Строим сайт на основе страницы в Instagram с помощью Bootstrap

instaportfolio

Здравствуй, дорогой друг! В этом уроке мы создадим простой сайт-портфолио, который будет базироваться на фотографиях из вашего аккаунта в Instagram. Дизайн сайта сделал Tomas Laurinavicius, и он получился у него простым, функциональным и просторным. Итак, начнем!

Скачать исходники Демо

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

Как убрать местоположение фото в ВКонтакте

MAP

Давным-давно я опубликовал запись о том, как добавить местоположение к статусу ВКонтакте. Однако заметил, что на сайт заходят по запросу «как убрать местоположение». Оказалось, что это проще простого.

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

Интерактивная инфографика с анимациями CSS и SVG

coffee

Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.

Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML. C помощью этого мы можем манипулировать элементами SVG файла используя технологии вроде CSS или JavaScript, с которыми разработчики уже знакомы.

С правильным применением технологий и современным браузером, разработчики могут создавать впечатляющие анимации и эффекты с помощью SVG. Сегодня мы рассмотрим возможности SVG и создадим интерактивную векторную инфографику, демоверсию которой можно посмотреть здесь.

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

Делаем аудио слайдшоу с помощью jPlayer

Снимок экрана 2014-10-23 в 15.53.40

Сегодня мы поделимся с вами аудио сладшоу. Используя фреймворк jPlayer, слайдшоу будет показывать изображения и играть музыку, меняя картинки в определенном моменте песни. Ограничений в количестве изображений нет. Кроме того можно использовать тег div или любой другой макет.

Скачать Демо

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

Форма входа и регистрации с помощью CSS3 и HTML5

Здравствуй, дорогой друг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.

В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

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

3D кнопки с помощью CSS3

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Preview

Заметка автора: Orman любезно разрешил нам кодировать любую из его фриби, так что в будущем ждите еще туториалы!

ПОСМОТРЕТЬ ДЕМО

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

Перемещения и трансформации в CSS3

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

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

туда »