Ambient CSS v3: физически корректное освещение для CSS
Ambient CSS v3 – Blender meets CSS
Ambient CSS v3 превращает CSS в сцену с физически корректным освещением. Система позволяет управлять глобальным и точечным светом, направлением, высотой, отражениями и материалами — от матового до стекла и металла. Каждая сцена пересвечивается в реальном времени, а компоненты для React упрощают интеграцию. Проект объединяет подходы Blender и CSS, открывая новые возможности для веб-дизайна.
Каждая сцена пересвечивается в реальном времени — ambient, физически корректный CSS.
- CSSer
Мне очень не нравится, как стиль dribbble/envato каким-то образом вырвался из песочницы и попал в Claude, и теперь я вижу его повсюду вперемешку с посредственными макетами. Я думаю про себя, что, может быть, такие вещи помогут этому противостоять, но потом я вижу это в сочетании с типографикой 12px (та 3D-панель мониторинга Kubernetes) и в ужасе отшатываюсь. Пожалуйста, считайте это общественным объявлением: Claude из коробки не понимает UX и принципов хорошего дизайна. Пожалуйста, сходите и обнимите дизайнера.
- graypegg
Придирка, но возвышение (elevation) имело бы гораздо больше смысла, если бы вы задали базовую плоскость и перспективу, а затем сдвигали элемент вверх по оси Z с помощью translate3d. Это также увеличивало бы размер элемента. При этом, вероятно, было бы раздражающе работать с трансформированными DOM-узлами, но то, что в примере с «отскоком» движется только фон, показалось мне странным. Также текстуры, похоже, представляют собой просто градиенты или встроенные данные текстур. Я думал, что здесь будет использоваться https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... с запасным вариантом на градиенты/готовые изображения для Firefox.
- alexaholic
Мы делали это в эпоху Web 2.0 с помощью PNG, GIF и `progid:DXImageTransform`, потому что тогда это нельзя было сделать только стандартным CSS. Затем, когда CSS (и MS!) эволюционировали, чтобы это поддерживать, мир перешел на плоские интерфейсы. Ирония, не правда ли?
- mminer237
Интересная идея, но ощущается очень плохо сделанной. Направление света почему-то управляет всей сеткой, но останавливается за пределами произвольного div и часто просто перестает работать вообще, к тому же эффект кажется запаздывающим для такого простого эффекта. Каналы перепутаны. Пример, похоже, не работает, а на видео он почему-то просто делает два края белыми? Цветовые опции и текстуры довольно уродливые. Цвета стекла явно просто не работают. «Латунь» на последнем почему-то превращается в «оливковый»? Радиокнопки — плохая идея для цифрового интерфейса, реализованы совершенно непоследовательно(‽), а средняя вообще не работает. Кнопки практически не дают обратной связи, нажаты они или нет. Это очень напоминает Material Design от Google, по крайней мере его старые версии, только гораздо более неряшливо, менее удобно и менее красочно.
- charlesrice
Мне больше всего нравятся ручки, где некоторые можно схватить и вращать, как будто они физические, а другие реагируют только на вертикальное положение курсора, так что чувствуешь себя сумасшедшим, пытаясь ими пользоваться.