Концепт morphing buttons

Опубликовал: 4 года назад CSS, Статьи

Сегодня блог Виктора Доценко представляет вам на повестку дня статью о «Morphing buttons ».

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

Библиотека была создана для вдохновения и под вдохновением от концепции трансформации элементов, где элемент действия (к примеру, кнопка) превращается в компонент.

Примеры в полной версии статьи демонстрируют различные типы компонентов и трансформацию над ними. Для большего понимания о сути повестнования я рекомендую прочитать статью целиком. Готовы? Поехали ...

Морфинг кнопки

морфинг кнопки

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

Примеры показывают различные типы компонентов, т.е. полноэкранную накладку, модальное окно, боковую панель и многое другое.

Взгляните на демо,  и вам станет понятно о чем идет речь.

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

Демо Скачать

морфинг кнопки

Morphing Buttons: Описание концепта

Трансформация кнопки (Morphing) в полноэкранное оверлей заключается в следующем —   оболочка, в которой располагает контент, и, собственно, кнопка по умолчанию видны, а контент скрыт. При нажатии на кнопку контент появляется. Позицию для контента делаем фиксированной —  это и создает эффект выхода из потока. На примерах в демо у некоторых элементов есть задержка и переходы, сделано это дабы проявлять текст и расширять элемент,  над которым мы проводим эксперимент с трансформацией.

morphing buttons

концепт morphing button

Демо Скачать

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

Эффект трансформации (морфинга) у элементов является очень интересным концептом и область применения его  может быть весьма распространенной. Есть конечно баги и недоработки и есть над чем поработать.

Помочь с доработкой можете и вы — проект на Github.

На этом все, всего вам хорошего. Вдохновляйтесь, творите и развивайтесь в месте с нами. Данные примеры и статьи помогают лучше изучить HTML и CSS. Жду ваших комментариев и визитов.

Если вам понравилась данная статья, вы можете прочитать так же:  Кнопки с эффектом загрузки на CSS3

source: Codrops

Summary
morphing buttons
Article Name
morphing buttons
Description
Концепт morphing buttons. Новая крутая фишка - трансформирующие кнопки (morphing buttons). Придадут вашим сайтам новейшие функции и примочки.
Author


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