Перевод поста «8 Frontend Coding Ideas That Will Inspire You To Code».
Если вы фронтенд-разработчик и как раз обдумываете, что бы такого интересного создать, обратите внимание на эти проекты. Мы не призываем повторять их в точности (хотя тоже можно), но как источник вдохновения они вполне подойдут.
1. Анимированная строка меню
Это 60 FPS флюид-хедер с анимацией при переключении вкладок. Для достижения такого эффекта можно использовать либо CSS-анимации, либо JavaScript.
See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.
Чему вы научитесь, создав такую строку меню:
- Гармонично использовать HTML, CSS и JavaScript.
- Работать с SVG и CSS-анимациями, а также комбинировать их.
2. Кнопки в стиле киберпанк 2077
Прекрасные кнопки в стиле киберпанк. Обратите внимание на эффект при наведении и попробуйте воссоздать его. Если не знаете, как это сделать, подсмотрите в источнике.
See the Pen Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey (@jh3y) on CodePen.
Чему вы научитесь, создавая эти кнопки:
- Использовать CSS-переменные, ключевые кадры и clip-path.
- Создавать сложные анимации при наведении.
3. Шахматная доска с фигурами
Интерес к шахматам возрос просто до небес после выхода мини-сериала «Ход королевы», созданного на основе одноименного романа Уолтера Тевиса. Если вы его еще не видели — обязательно посмотрите!
Задание со звездочкой: сделайте шахматную доску интерактивной.
See the Pen Cheap AI Chess! by Jake Albaugh (@jakealbaugh) on CodePen.
Чему вы научитесь, работая над этим проектом:
- Создавать сетку 8 х 8. Попробуйте использовать для этого CSS Grid.
- Вырезать шахматные фигурки при помощи CSS.
- Если захотите сделать доску интерактивной — поработаете с JavaScript!
4. Пользовательский интерфейс панели для менеджмента проектов
Это панель для менеджмента проектов. С ее помощью вы можете мониторить проекты и переписываться с клиентами.
See the Pen Project Management Dashboard UI by Aybüke Ceylan (@aybukeceylan) on CodePen.
Чему вы научитесь, создавая такой интерфейс:
- Строить UI при помощи CSS и HTML.
- Использовать веб-сокеты для создания чата.
5. Неоморфная анимация
Неоморфизм (или нео-скеоморфизм) — новый виток в развитии реалистичного стиля в дизайне.
Работая над этим проектом, вы научитесь создавать плавные анимации при помощи CSS и HTML.
See the Pen 【css】Neumorphism_animation by masuwa (@ma_suwa) on CodePen.
6. HTML-Земля
See the Pen HTML Earth (Made with LUME) by Joe Pea (@trusktr) on CodePen.
Попробуйте создать Землю! Кстати, вы обратили внимание на периодически появляющуюся тень от Луны на поверхности Земли?
Чему вы научитесь, создавая HTML-Землю:
- Использовать библиотеку LUME. Согласно README этого проекта на GitHub, LUME — это «набор инструментов, упрощающий создание интерактивных 2D или 3D изображений для любых устройств, а также для дополненной и виртуальной реальности».
- Создавать 2D и 3D-объекты при помощи HTML, CSS и JavaScript.
7. «Текучие» вкладки с анимациями
Вы только посмотрите на эту красоту! Обратите внимание на маленькие детали при переключении вкладок.
See the Pen Tabbar by Aaron Iker (@aaroniker) on CodePen.
Чему вы научитесь, создавая такие вкладки:
- Применять CSS transform для создания 60 FPS анимаций.
- Создавать сложные анимации при помощи CSS или JavaScript.
8. Стакан воды
See the Pen Cup of Water by Zane Wesley (@zanewesley) on CodePen.
Осторожно: вызывает жажду! Попейте водички, прежде чем браться за этот проект.
Чему вы научитесь, работая над ним:
- Использовать CSS для создания 60 FPS анимаций.
- Использовать CSS transform и псевдоселекторы.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]