В сегодняшнем конкурсе GUI Challenge @AdamArgyleInk делится мыслями о способе создания всплывающих уведомлений — неинтерактивного и пассивного компонента пользовательского интерфейса для обеспечения обратной связи с пользователем. Изучите элемент [output], CSS-сетку, анимацию и технику FLIP, которая помогает создать адаптивный и доступный компонент.
Главы:
- 0:00 - Введение
- 0:23 – Обзор
- 2:02 - [вывод]
- 3:00 - Макет
- 4:41 - Анимация
- 5:50 – JavaScript, часть 1
- 6:55 – Уменьшение движения
- 7:43 – Ключевые кадры
- 8:09 – JavaScript, часть 2
- 10:48 - ПЕРЕВЕРНИТЕ
- 14:18 - Аутро
Ресурсы:
- Читать дальше → https://goo.gle/3GghBfI
- Попробовать демо → https://goo.gle/3EHsuXG
- Получить исходник → https://goo.gle/3oykceU
- ЛИСТАТЬ → https://goo.gle/3oz8P6D
- Пол Льюис (из SuperCharged) → https://goo.gle/31IOFy0
Посмотреть больше задач с графическим интерфейсом → https://goo.gle/GUIchallenges
Подписаться на раздел «Разработчики Google Chrome» → https://goo.gle/ChromeDevs.