Красивые эффекты для модальных окон

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

Простой эффект YouTube-меню

Сегодня мы покажем вам как создать простое меню, вроде того которое вы можете видеть слева на видеопортале YouTube при просмотре видео (там, где написано: "Гид"). Меню состоит из маленькой иконки меню, надписи и списка пунктов меню, которые появляются, когда вы кликаете на иконку меню. Мы добавим к нему некоторые стили и эффекты для того, чтобы сделать его немного более интересным.

Итак, приступим!

Простые эффекты для иконок

Сегодня мы хотим поделиться способом создания нескольких простых эффектов для иконок. Идея состоит в том, чтобы создать стильный эффект при наведении курсора мыши на иконку, используя CSS переходы, анимацию и псевдо-элементы. Для иконок мы будем использовать шрифт иконок (Eco Ico by Matthew Skiles, созданный при помощи IcoMoon app), который мы добавляем используя псевдо-класс :before.

Адаптивное многоуровневое меню

Сегодня мы хотим поделиться с вами экспериментальным выпадающим меню. Основная идея состоит в том, чтобы сэкономить место на странице для меню, которое имеет много пунктов и вложенных уровней. Каждый под-уровень в этом меню будет показан в своем собственном блоке, при этом "родительский" уровень будет исчезать. Это будет реализовано при помощи css-анимации. Меню будет "резиновым", таким образом оно может быть легко использовано в адаптивных шаблонах.

Conditionizr - быстрый и легкий JavaScript для определения браузера и разрешения экрана


Conditionizr - это быстрый и легкий (3 КБ) скрипт, который определяет браузер пользователя и разрешение экрана, а также позволяет создавать условия для загрузки JavaScript и CSS-файлов.

Простые и красивые эффекты для выпадающих списков

Сегодня мы хотим поделиться с вами несколькими простыми эффектами для выпадающих списков. Идея состоит в преобразовалии нормального select-а в нечто более привлекательное при помощи jQuery-плагина. Раскрытие пунктов списка будет происходить при помощи transition, а параметры могут быть настроены таким образом, чтобы достигать уникальных эффектов.