Ambient CSS v3: 물리 기반 조명으로 CSS에 Blender의 빛을 담다
Ambient CSS v3 – Blender meets CSS
Ambient CSS v3는 CSS에 물리 기반 조명 시스템을 도입합니다. 전역 조명, 커스텀 라이트, 방향 조절, Elevation, 반사 재질(Matte, Shiny, Glass, Brushed 등), 색상 반사, 모서리 처리(Chamfer, Fillet) 등을 지원하며, React 컴포넌트로도 제공됩니다. 모든 장면이 실시간으로 다시 조명되어 Blender와 유사한 3D 느낌을 웹에서 구현합니다.
모든 장면이 실시간으로 다시 조명되는 물리 기반 CSS 조명 시스템.
HN 토론
95- CSSer
나는 정말 드리블/엔바토 스타일이 어떻게 클로드에 침투해서 탈출했는지 싫다. 이제 어디서나 평범한 디자인 레이아웃과 섞여서 보인다. 나는 스스로에게 이런 것들이 그걸 상쇄하는 데 도움이 될지도 모른다고 생각하지만, 12px 타이포그래피(쿠버네티스 3D 대시보드 같은 것)와 함께 쓰이는 걸 보면 공포에 질린다. 이것을 공익 광고로 생각해 주세요: 클로드는 기본적으로 UX나 좋은 디자인 원칙을 이해하지 못한다. 디자이너에게 가서 안아 달라고 하세요.
- graypegg
사소한 지적이지만, 고도(elevation)는 기본 평면을 가정하고 원근법을 설정한 다음 Z축 위로 translate3d로 올리면 훨씬 더 말이 될 것이다. 그러면 요소의 크기도 커질 것이다. 말하자면, 변환된 DOM 노드로 작업하는 것은 아마 짜증날 것이지만, '바운스' 예제에서 배경만 움직이는 것이 나에게는 이상하게 눈에 띄었다. 또한, 텍스처는 그라디언트나 포함된 텍스처 데이터인 것 같다. 나는 이것이 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V... 를 사용하고 파이어폭스에서는 그라디언트/사전 제작된 이미지로 대체할 것이라고 생각했다.
- alexaholic
우리는 웹 2.0 시대에 PNG, GIF 및 `progid:DXImageTransform`으로 이 작업을 하곤 했는데, 그때는 표준 CSS만으로는 할 수 없었기 때문이다. 그런 다음 CSS(그리고 MS!)가 그것을 가능하게 하도록 진화하면서, 세상은 평면 UI로 옮겨갔다. 아이러니하지 않은가?
- mminer237
재미있는 아이디어지만, 매우 조잡하게 만들어진 느낌이다. 빛의 방향이 어떤 이유로 전체 그리드를 지배하지만 임의의 div 밖에서 멈추고 종종 아예 작동을 멈춘다. 게다가 그렇게 단순한 효과에 비해 반응이 느리다. 채널이 엉망이다. 예제가 작동하지 않는 것 같고, 비디오에서는 어떤 이유로 두 가장자리만 흰색으로 만든다? 색상 옵션과 텍스처는 좀 못생겼다. 유리 색상은 분명히 작동하지 않는다. '놋쇠'가 마지막 것에서 이유 없이 '올리브'로 변한다? 라디오 버튼은 디지털 인터페이스에 나쁜 아이디어이며, 완전히 일관성 없게 구현되었고(‽), 가운데 버튼은 전혀 작동하지 않는다. 버튼에는 눌렸는지 안 눌렸는지에 대한 피드백이 거의 없다. 구글의 머티리얼 디자인, 적어도 이전 버전을 많이 연상시키지만, 훨씬 더 엉성하고 덜 유용하며 덜 화려하다.
- charlesrice
내가 가장 좋아하는 것은 손잡이인데, 일부는 물리적인 것처럼 잡고 회전할 수 있지만 다른 것들은 커서의 수직 위치에만 반응해서 미친 사람처럼 느끼게 한다.