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

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

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

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

Рады представить вам бесплатный набор иконок под названием Helium. Это набор с более чем 100 иконок в AI, EPS, а также в формате SVG. Кроме того, есть иконки в шрифтовом формате.

Мы рады опубликовать этот великолепный набор круглых и бесплатных иконок от Round Icons. Набор тематических иконок: транспорт, путешествие и экология в нескольких форматах.

Команда PixelBuddha, очень рада поделиться с вами бесплатным набором красочных плоских иконок в двух стилях. В бесплатный набор входит часть иконок из последней коллекции Ballicons 2 vol. 2. Набор содержит 30 иконок, некоторые из которых являются абсолютно эксклюзивными, сделанные специально для  «Codrops халява». Вы даже не найдёте их в премиум-версии. 

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

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

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

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

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

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

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

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

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

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

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