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

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

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

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

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

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

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

Сегодняшняя халява превратить вас в дизайнера моды мгновенно. Созданный Vecteezy - этот набор из 32-х стильных хипстерских иконок может пригодиться вам в ваших проектах. В наборе есть несколько форматов: PNG, AI и EPS.

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

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

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

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