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

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание, что это данные примеры были протестированы в последних версиях браузеров.

Также обратите внимание, что IE11, похоже, не поддерживает vieport единицы в Calc (), которые мы используем для некоторых анимаций.

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

Для анимации SVG, мы используем Snap.svg - отличная JavaScript SVG библиотека для современных браузеров.