Как создать Input Field в стиле Apple? 🍎 Полный гайд по HTML и CSS
Хотите поднять уровень своих интерфейсов до премиального? В этом видео мы с нуля создадим современное поле ввода, вдохновленное дизайном страницы авторизации Apple. Мы реализуем тот самый эффект «плавающего» плейсхолдера, который плавно уменьшается и перемещается наверх при вводе данных. Это отличный проект для вашего портфолио и пет-проектов! 🚀 В этом уроке мы разберем: ✅ Стилизацию контейнера с помощью position: relative и теней. ✅ Магию анимации: работаем с transition и transform для плавных переходов. ✅ Хитрости CSS: используем селекторы :focus и :not(:placeholder-shown), чтобы текст не перекрывал введенные данные. ✅ Интеграцию иконок и кастомную валидацию. Таймкоды для удобной навигации: 01:32 — Разметка HTML: создаем структуру input-wrapper. 03:45 — Базовый CSS: настраиваем шрифты и цветовую палитру. 09:05 — Позиционирование: как разместить иконки и текст внутри поля через absolute. 14:51 — Анимация фокуса: заставляем текст «взлетать» при клике. 17:10 — Решаем проблему возврата текста: фиксируем плейсхолдер над данными. 21:41 — Финальные штрихи: стильный outline и проверка на валидность. Полезные ссылки из видео: 🔹 Google Fonts (Poppins): fonts.google.com 🔹 Font Awesome: fontawesome.com — иконки для ваших интерфейсов. 🔹 Color Hunt: colorhunt.co — готовые палитры для вдохновения. 🔹 CSS Scan (Shadows): getcsscan.com — библиотека крутых теней.
Хотите поднять уровень своих интерфейсов до премиального? В этом видео мы с нуля создадим современное поле ввода, вдохновленное дизайном страницы авторизации Apple. Мы реализуем тот самый эффект «плавающего» плейсхолдера, который плавно уменьшается и перемещается наверх при вводе данных. Это отличный проект для вашего портфолио и пет-проектов! 🚀 В этом уроке мы разберем: ✅ Стилизацию контейнера с помощью position: relative и теней. ✅ Магию анимации: работаем с transition и transform для плавных переходов. ✅ Хитрости CSS: используем селекторы :focus и :not(:placeholder-shown), чтобы текст не перекрывал введенные данные. ✅ Интеграцию иконок и кастомную валидацию. Таймкоды для удобной навигации: 01:32 — Разметка HTML: создаем структуру input-wrapper. 03:45 — Базовый CSS: настраиваем шрифты и цветовую палитру. 09:05 — Позиционирование: как разместить иконки и текст внутри поля через absolute. 14:51 — Анимация фокуса: заставляем текст «взлетать» при клике. 17:10 — Решаем проблему возврата текста: фиксируем плейсхолдер над данными. 21:41 — Финальные штрихи: стильный outline и проверка на валидность. Полезные ссылки из видео: 🔹 Google Fonts (Poppins): fonts.google.com 🔹 Font Awesome: fontawesome.com — иконки для ваших интерфейсов. 🔹 Color Hunt: colorhunt.co — готовые палитры для вдохновения. 🔹 CSS Scan (Shadows): getcsscan.com — библиотека крутых теней.