12 великолепных компонентов пользовательского интерфейса для вашего вдохновения в дизайне

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

Были включены различные типы некоторых из наиболее часто используемых компонентов в наш рабочий процесс разработки, включая карточки, текст, кнопки, флажки, значки, загрузчики и меню.

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

1. Карточный слайдер

Айбуке Джейлан

https://codepen.io/aybukeceylan/embed/yLaqqOL?height=600&default-tab=result&embed-version=2

2. Зарегистрируйтесь/Войти

Автор: FlorinPop

https://codepen.io/FlorinPop17/embed/vPKWjd?height=600&default-tab=result&embed-version=2

3. Группа флажков

Автор: Ховард Брюньюльфсен

https://codepen.io/havardob/embed/BapJYMg?height=600&default-tab=result&embed-version=2

4. Анимированная панель вкладок

Автор: abxlfazl khxrshidi

https://codepen.io/abxlfazl/embed/OJbEbxL?height=600&default-tab=result&embed-version=2

5. Apple TV — ротация слов

Автор: Стивен Лей

https://codepen.io/stevenlei/embed/RwpRgzy?height=600&default-tab=result&embed-version=2

6. Текст курсора Spotlight

Автор: Кэролайн Арц

https://codepen.io/carolineartz/embed/rNaGQYo?height=600&default-tab=result&embed-version=2

7. Стеклянная карта

Автор: Том Миллер

https://codepen.io/creativeocean/embed/oNzjEYj?height=600&default-tab=result&embed-version=2

8. Оранжевый 3D-переключатель

Автор: Йоав Кадош

https://codepen.io/ykadosh/embed/jOwjmJe?height=600&default-tab=result&embed-version=2

9. Бар Jello Tab

Автор: Флавио Амарал

https://codepen.io/flavio_amaral/embed/xxgYGrR?height=600&default-tab=result&embed-version=2

10. Простые загрузчики CSS

Автор: Дженнинг

https://codepen.io/jenning/embed/YzNmzaV?height=600&default-tab=result&embed-version=2

11. Реакции обратной связи

Аарон Икер

https://codepen.io/aaroniker/embed/qBjyKGO?height=600&default-tab=result&embed-version=2

12. Светящиеся значки CSS

Автор: Кришна Гупта

https://codepen.io/Krishnaa_Gupta/embed/MWoRqmr?height=600&default-tab=result&embed-version=2

---

Вдохновляйтесь, пробуйте создавать свое!

Источник статьи: http://dev.to/