Dynamic Island

Интерактивная «Dynamic Island» в стиле iPhone на чистых HTML и CSS, без единой строки JavaScript.

Что умеет - Раскрывается при наведении: «чёлка» плавно растягивается и показывает заголовок, подпись и прогресс-бар, как у плеера - Работает с клавиатуры: остров получает фокус по Tab и раскрывается так же, как от мыши - 4 темы: Deep Purple, Gold, Space Black и Silver. Меняются цвет корпуса, кнопок и обои - Анимация появления: телефон и кнопки тем плавно возникают при загрузке - Масштабируется под окно: все размеры заданы в em от 1vmin Как попробовать Открой проект в браузере, наведи курсор на «чёлку» и переключи тему кружками сверху.

Темы

Deep Purple

Gold

Space Black

Silver

Подробнее о проекте: как это устроено, запуск, структура (нажми, чтобы развернуть)

Содержание

• Как это работает без JavaScript
• Запуск
• Как поменять текст в острове
• Структура проекта

Как это работает без JavaScript

Переключение тем. В начале разметки стоят четыре скрытых <input type="radio" name="theme">, а кружки сверху являются <label for="..."> к ним. Клик по кружку выбирает радиокнопку, и правила вида

#theme-gold:checked ~ .dynamic-island__device { ... }

через соседний селектор ~ перекрашивают корпус, кнопки и включают нужный слой обоев.

Раскрытие острова. У .device__island стоит tabindex="0", поэтому на нём срабатывают и :hover, и :focus-within. По этим состояниям увеличивается max-height, появляются текст и прогресс-бар, а кривая cubic-bezier(0.666, 0, 0.4, 1.2) даёт лёгкий «отскок» в конце анимации.

Текст и время. Заголовок, подпись и время 20:01 / -8:28 выводятся через content в псевдоэлементах, отдельных узлов с текстом в разметке нет.

Обои и свечение. Фон экрана собран из градиентов и картинки background-img.png с режимами наложения и размытием. Для каждой темы свой слой, видимым становится только слой выбранной темы.

Запуск

Сборка и зависимости не нужны. Достаточно открыть index.html в браузере:

git clone https://github.com/dekciw/DynamicIslandCSS.git
cd DynamicIslandCSS
# открой index.html двойным кликом или через любой локальный сервер

Шрифт Inter подгружается из Google Fonts. Без интернета страница отобразится системным шрифтом.

Как поменять текст в острове

Текст задан в style.css в свойствах content. Найди в файле строки https://github.com/dekciw, 20:01 и -8:28 и замени их на свои значения.

Структура проекта

.
├── index.html           # разметка: радиокнопки тем, корпус телефона, экран и остров
├── style.css            # темы, анимации, раскрытие острова
├── background-img.png   # текстура обоев экрана
└── assets/              # логотип и скриншоты для README