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

Идея заключается в том, чтобы показать пользователю только одно поле для ввода данных без каких-либо отвлекающих и лишних элементов, но с некоторыми элементами, которые действительно полезны, такие как: счётчик количества вопросов, ненавязчивый прогресс заполнения формы и стрелка следующего вопроса. 

Сегодня мы очень рады поделиться с вами набором стильных прелоадеров от PixelBuddha!

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

Сегодня мы бы хотели поделиться с вами экспериментальным слайд-шоу. Идея основана на большой навигационной концепции с сайта Wild, где можно посмотреть проекты в полноэкранном режиме или в режиме карусели. Есть множество методов, которые бы позволили реализовать подобное, но мы попытаемся воссоздать это слайд-шоу с помощью библиотеки Dragdealer.js и 3D-преобразования. Основная идея заключается в переводе ползунка по оси Z, что позволит ему быть либо в полноэкранном режиме, либо в уменьшенном размере карусели. При переключении фактический размер слайд-шоу и удаление преобразования, когда они больше не нужны, позволит слайд-шоу иметь "реальный" размер (т.е. 25% от окна). 

Сегодня мы бы хотели поделиться с вами несколькими простыми примерами стильных и эффектных уведомлений для вашего сайта. Есть множество способов показа ненавязчивых сообщений пользователям: от классических growl-like до уведомлений в строке состояния браузера. Тут действительно нет предела для творческих идей, но вы должны понимать, что тут важно не переусердствовать, если вы конечно не хотите, чтобы ваши пользователи падали со стульев, когда они получают эти самые уведомления. 

В данных примерах мы используем CSS анимации для отображения и скрытия уведомлений. Некоторые из них имеют своеобразный таймер/прогресс, перед тем как появиться, это может быть удобно для конкретных действий, которые требуют определённого времени отклика системы, например отправка сообщения, и т.д.

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

Мы используем CSS переходы, CSS анимации, созданные с помощью bounce.js и анимаций SVG с помощью Snap.svg. Мы также используем шрифт Font Awesome и профиль изображений из Random User Generator.

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

Примеры используют JavaScript и Canvas для создания различных анимаций header’а. Каждый пример использует свой собственный файл JavaScript, но каждый из них имеет сходство. 

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

Методы, которые мы используем для этих эффектов при наведении включает 3D-преобразования и некоторые переходы псевдо-элементов. Обратите внимание, что это будет работать только в современных браузерах.

К сожалению, переходы с текстом в Firefox не очень сглажены.

Medium, блог-платформы, которая получила популярность в течение последних нескольких месяцев, и является одним из самых удобных и с наиболее отполированным пользовательским интерфейсом в сети. Если вы посмотрите на интерфейс, то вы заметите, что большое внимание было уделено: переходам, пробелам, цветам, шрифтам, изображениям, и иконографии.

В этой статье я опишу, как реализовать эффект перехода, который можно увидеть на Medium, нажав на "Читать дальше" в нижней части страницы. Смотрите также  на анимированную иллюстрацию ниже.

Основная идея состоит в том, чтобы показывать только иконки для мобильных девайсов и отображать ещё и текст рядом с иконками, когда есть достаточно места для его отображения.

Иконки для наших вкладок позаимствуем из шрифтового набора Icomoon App.