Liquid glass: стеклянные кнопки iOS 26 через промпт агенту

Что такое liquid glass простыми словами

Возьми кусочек матового стекла и положи его поверх любимой фотографии. Фото за ним видно - но размыто, мягко, как через запотевшее окно. По краю бежит тонкий блик. Ткнул пальцем - стекло чуть-чуть ожило. Вот это и есть liquid glass, «жидкое стекло» - фирменный стиль кнопок и панелей из iOS 26.

Кнопка перестаёт быть плоским прямоугольником с заливкой. Она становится полупрозрачной стекляшкой, сквозь которую дышит фон. Звучит как мелочь. А на деле именно это делает интерфейс таким «дорогим» и «эппловским».

Зачем вайбкодеру разбираться в стекле

Ты вайбкодер - стили руками не пишешь. Так зачем тебе вообще знать, из чего собрано стекло? А вот зачем. Если знаешь начинку, ты:

• объясняешь агенту словами - и он делает с первого раза, а не лепит мутное непонятно что;
• понимаешь, почему стекло иногда не видно (спойлер: всё дело в фоне) и как это быстро починить;
• не превращаешь сайт в «стеклянный ад», где всё просвечивает сквозь всё, а текст читается через раз;
• говоришь с дизайнерами на одном языке - liquid glass, frosted, blur - это не магия, а конкретные слова.

«Сделай красивые кнопки» и «сделай кнопки в стиле liquid glass: размытие фона, лёгкая прозрачность, блик по краю, скругление 16» - это разница между лотереей и заказом по меню.

Из чего собрано стекло: четыре ингредиента

Apple называет это «динамический материал». Звучит страшно. На деле - четыре простых слоя друг на друге. Запомни их - и сможешь заказывать стекло как кофе по утрам.

1. Размытие фона - сердце эффекта

Стекло начинается с размытия фона Размытие фона (blur) - эффект, при котором всё, что находится ЗА кнопкой, показывается нечётко, размазанно. Именно из-за этого кнопка выглядит как матовое стекло, а не просто как прозрачный квадрат. . Кнопка не закрашена сплошным цветом - сквозь неё видно то, что под ней, только в расфокусе. Убери размытие - получишь прозрачный квадратик. Добавь - и сразу «матовое окно». Это самый важный слой, без него остальное бессмысленно.

2. Прозрачность и лёгкий оттенок

Стекло чуть-чуть прозрачное - иначе фон сквозь него не дышит. И ему можно задать слабый оттенок Оттенок (tint) - лёгкая подкраска стекла в какой-то цвет. Не сплошная заливка, а как будто стекло слегка тонированное. Нужен, чтобы выделить важную кнопку. : скажем, главную кнопку подкрасить в фирменный цвет, чтобы она выделялась на фоне обычных. В iOS для такой кнопки есть даже отдельный «усиленный» стиль.

3. Блик по краю - то, что оживляет

У настоящего стекла по кромке всегда бежит светлая полоска, отблеск. Без неё стекло плоское и мёртвое. С ней - объёмное и живое. Казалось бы, ерунда. А разница огромная.

4. Реакция на нажатие

Хорошая стеклянная кнопка отвечает на палец Интерактивность (interactive) - кнопка реагирует на касание и наведение мыши: чуть подсвечивается, играет светом. Делает интерфейс живым. В iOS это включается отдельно - не каждое стекло должно реагировать. : чуть подсвечивается, играет светом под касанием. Но есть нюанс. Эту реакцию дают не всем подряд, а только тому, на что реально нажимают - кнопкам и переключателям. Декоративную стеклянную карточку никто не трогает, и реакция ей ни к чему.

Несколько стеклянных кнопок рядом: один контейнер

Вот тут новички и спотыкаются. Одна стеклянная кнопка - проще простого. А когда их в ряд несколько, например в нижней панели, появляется правило: клади их в один общий контейнер.

Зачем? Причины две. Первая - так стекляшки красиво сливаются краями, когда стоят близко, как капли воды, что соединяются в одну. Вторая - так быстрее: нарисовать одно общее стекло на пять кнопок легче, чем пять отдельных. Пять стёкол врозь - это и тормоза, и каша на экране.

Почему стекло не получилось: разбор на примере

Ты просишь агента: «сделай мне модные стеклянные кнопки на сайте». Он бодро лепит полупрозрачные блоки. Смотришь на результат - и не понимаешь, в чём подвох. Какие-то бледные прямоугольники, никакого «вау», текст местами вообще не читается.

Что пошло не так:

1. Кнопки стоят на белом фоне - размывать нечего, стекла не видно.
2. Нет блика по краю - стекло плоское и мёртвое.
3. Текст тёмный поверх тёмного размытого фото - сливается в кашу.

А теперь смотри, как заказать стекло по уму:

Сделай на лендинге стеклянные кнопки в стиле iOS liquid glass. Важно:

Кнопки должны стоять поверх живого фона - большое фото или яркий градиент,
чтобы сквозь стекло было что размывать.
Эффект стекла: размытие фона за кнопкой, лёгкая прозрачность,
светлый блик по краю, скругление углов 16.
Главную кнопку «Заказать» слегка подкрась в фирменный teal,
чтобы она выделялась среди обычных.
Кнопки в нижней панели положи в один общий контейнер,
чтобы они красиво сливались краями и не тормозили.
Проверь читаемость текста на стекле и в светлой, и в тёмной теме.
Если текст сливается с фоном - добавь контраст.

Частые ошибки со стеклянными кнопками

• Стекло на белом или сплошном фоне. Размывать нечего - эффекта нет. Дай живой фон, и точка.
• Делать стеклянным вообще всё. Стекло - для кнопок, панелей и карточек, а не для каждого блока и каждой буквы.
• Забыть про блик. Без отблеска по краю стекло выглядит плоским и дешёвым. Мелочь, которая решает.
• Несколько стёкол без контейнера. Тормоза и каша. Соседние стекляшки - в один контейнер.
• Забыть про читаемость. Красивое стекло, на котором не виден текст, - это сломанная кнопка. Проверяй контраст в обеих темах.
• Непрозрачный фон под стеклом. За стеклом глухая заливка - и вся идея просвечивания тихо умирает.