Эффекты для диалоговых окон

Опубликовал: 3 года назад CSS, Уроки

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

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

Эффекты для диалоговых окон

Демо Скачать

Эффекты для диалоговых окон

В мае я переводил уже подобные уроки, к примеру: Кнопки с эффектом загрузки на CSS3  и Концепт morphing buttons, и сегодня я хочу поделиться с вами новыми свежими идеями. Стили и тенденции развития требует различных эффектов, которые соответствуют духу современного UI. Набор эффектов диалоговых окон содержит причудливые методы SVG морфинга и другие тонкие анимации.

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

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

Для диалоговых окон,мы будем использовать код:

В будущем вам следует использовать элемент <dialog>. К сожалению, на текущий момент он все еще имеет плохую поддержку в браузерах — IE, Firefox и Safari.

На примере видно, что в контейнере есть блок-затемнитель (Overlay) и собственно содержимое контейнера. Стандартные стили будут иметь вид  представленный ниже (префиксы браузеров опущены):

Используется flexbox для главного элемента диалогового окна для того, чтобы все содержимое диалога можно было распределить. Overley (затемнение) будет отображаться при воспроизведении анимации.

Пожалуйста, обратите внимание, что события указателя не работает для IE < 11 версии.

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

Примером эффекта (Sandra) вы можете посмотреть ниже:

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

JS код для диалога будет следующим:

Пример: в моей песочнице.

На этом все. Комментируйте, скачивайте, а  я с вами прощаюсь. До скорой встречи и до новых уроков и статей.


Новая система комментариев
comments powered by HyperComments