Вдохновляющие эффекты для диалоговых окон

Вдохновляющие эффекты для диалоговых окон

От автора: Небольшая коллекция вдохновляющих эффектов для диалоговых окон с использованием CSS анимаций. Некоторые эффекты используют SVG анимации, трансформирующие SVG пути с помощью Snap.svg.

скачать исходникидемо

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

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

А также, пожалуйста, обратите внимание на то, что IE11, кажется, не поддерживает использование единиц измерения области просмотра (viewport) в функции calc(), которую мы используем в некоторых анимационных трансформациях.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для диалогового окна мы используем следующую разметку:

Обратите внимание на то, что в будущем мы сможем использовать нативный (встроенный) элемент <dialog>. Но на данный момент он очень слабо поддерживается браузерами (IE, Firefox и Safari не поддерживают его).

Как вы могли заметить, у нас есть основной блок-обертка для диалогового окна, в котором размещены блок с подложкой (слой с затемнением) и блок с контентом. Базовые стили для диалогового окна выглядят следующим образом (вендорные префиксы опущены):

Мы используем модуль flexbox для главного диалогового элемента, чтобы отцентрировать контент в диалоговом окне. Подложка появится вместе с переходом. Обратите внимание на то, что свойство pointer-events не работает в IE < 11.

Некоторые эффекты имеют дополнительное разделение для внутреннего контента, чтобы их можно было изначально скрыть и растворить после завершения эффекта модального окна. Таким образом стоит поступать с эффектами, которые масштабируют/искажают диалоговое окно.

Пример эффекта под названием Sandra:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Путем добавления классов dialog—open и dialog—close мы можем контролировать появление диалогового окна и расположенных в нем элементов.

Скрипт для диалогового окна будет следующим:

А вызвать диалоговое окно можно вот так:

…где у нашей кнопки есть специальный атрибут data-dialog=»somedialog».

Для SVG эффектов (за исключением рисования линии в примере под названием Wilma) мы используем Snap.svg для трансформации SVG путей. Мы добавляем SVG фигуру внутри обертки прямо в контент диалогового окна, а затем определяем путь, который нужно изменить в data-morph-open.

Кажется, имеется некоторая проблема с наложением в браузере Safari при работе с эффектами, использующими перспективу.

Мы надеемся, что вам понравились данные эффекты и они вдохновили вас на создание чего-нибудь похожего!

Посмотрите репозиторий на Github

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree