Сегодня блог Виктора Доценко представляет вам на повестку дня статью о «Morphing buttons ».
Все это в рамках цикла образовательных статей от популярных веб разработчиков для вас, дорогие друзья.
Библиотека была создана для вдохновения и под вдохновением от концепции трансформации элементов, где элемент действия (к примеру, кнопка) превращается в компонент.
Примеры в полной версии статьи демонстрируют различные типы компонентов и трансформацию над ними. Для большего понимания о сути повестнования я рекомендую прочитать статью целиком. Готовы? Поехали ...
Морфинг кнопки
Некоторые разработчики под вдохновением придумывают вот такие вот вещи с трансформацией, где элемент действия превращается в компонент.
Примеры показывают различные типы компонентов, т.е. полноэкранную накладку, модальное окно, боковую панель и многое другое.
Взгляните на демо, и вам станет понятно о чем идет речь.
Morphing Buttons: Описание концепта
Трансформация кнопки (Morphing) в полноэкранное оверлей заключается в следующем — оболочка, в которой располагает контент, и, собственно, кнопка по умолчанию видны, а контент скрыт. При нажатии на кнопку контент появляется. Позицию для контента делаем фиксированной — это и создает эффект выхода из потока. На примерах в демо у некоторых элементов есть задержка и переходы, сделано это дабы проявлять текст и расширять элемент, над которым мы проводим эксперимент с трансформацией.
На остальных примерах в демо вы можете увидеть эксперименты с различным воздействием на контент: сдвиг, масштабирование и другие. Визуально порой все это выглядит весьма прекрасно, будто кнопка превращается в элемент управления видео-плеером.
Эффект трансформации (морфинга) у элементов является очень интересным концептом и область применения его может быть весьма распространенной. Есть конечно баги и недоработки и есть над чем поработать.
Помочь с доработкой можете и вы — проект на Github.
На этом все, всего вам хорошего. Вдохновляйтесь, творите и развивайтесь в месте с нами. Данные примеры и статьи помогают лучше изучить HTML и CSS. Жду ваших комментариев и визитов.
Если вам понравилась данная статья, вы можете прочитать так же: Кнопки с эффектом загрузки на CSS3
source: Codrops