.element {
box-shadow: 0px 8px 24px -4px rgba(11, 18, 32, 0.18);
background: linear-gradient(135deg, #7a93ac 0%, #afb3f7 100%);
border-radius: 24px;
}박스 섀도우, 그라디언트, 모서리 둥글기, 트랜스폼, 필터를 실시간 미리보기를 보면서 조정하고 완성된 규칙을 복사합니다. 미리보기는 모든 패널의 설정을 합쳐서 보여주므로 한 번에 전체 표면 스타일을 만들 수 있습니다.
그림자, 그라디언트, 변형은 문법은 쉽지만 결과를 머릿속으로 그리기 어려운 속성입니다. 깊이감 있는 그림자와 얼룩처럼 보이는 그림자의 차이는 블러 몇 픽셀과 알파값 한 단계이고, 명세를 아무리 읽어도 직접 보는 것을 대신하지 못합니다.
여기서는 모든 조절값이 미리보기에 즉시 반영되고 그에 해당하는 선언문이 그대로 출력됩니다. 눈으로 정한 값이 곧 붙여 넣을 값입니다. 여러 겹의 그림자, 임의 위치의 색 정지점, 전체 transform 목록을 다루며, 출력은 프레임워크나 전처리기를 전제하지 않는 순수 CSS입니다.
설득력 있는 그림자는 장식이 아니라 물리적인 주장입니다. 이 요소가 표면에서 얼마나 떠 있고 빛이 어디에 있는지를 말합니다. 그렇게 읽히게 만드는 요소는 가로 오프셋은 거의 없고 세로 오프셋만 주는 것, 그 오프셋보다 큰 흐림 반경, 그리고 회색이 아니라 투명한 검정을 쓰는 것입니다. 회색은 뒤에 무엇이 있든 그 위에 얹히지만 투명도는 아래 색이 비쳐 보이게 하고, 실제 그림자가 하는 일이 그것입니다. 맞닿은 부분을 표현하는 좁고 진한 층과 주변광을 표현하는 넓고 옅은 층을 두세 개 겹치는 것이, 깊이로 보이는 그림자와 얼룩으로 보이는 그림자를 가릅니다.
그러데이션에는 잘 알려진 부작용이 있습니다. 채도 높은 두 색을 섞으면 중간에서 채도가 떨어져, 파랑에서 노랑으로 가는 길이 양 끝 어느 쪽도 예고하지 않은 탁한 회녹색을 지나갑니다. 보간이 기본적으로 sRGB에서 일어나기 때문인데, 중간 근처에 색 정지점을 하나 넣어 경로를 그 지점 바깥으로 돌리는 것이 보통의 해법입니다. 색 공간을 따져 가며 추론하기보다 정지점을 끌어 보면서 눈으로 찾는 쪽이 훨씬 빠릅니다.
변환은 오른쪽에서 왼쪽으로 적용됩니다. 의도와 전혀 다른 결과가 나오는 이유가 여기 있습니다. translate 다음 rotate 는 요소를 옮긴 뒤 제자리에서 돌리고, rotate 다음 translate 는 좌표계를 먼저 돌리므로 이어지는 이동이 회전된 축을 따라갑니다. transform-origin 이 여기에 겹칩니다. 회전과 크기 변경 모두 그 점을 중심으로 일어나기 때문입니다. 이 페이지의 출력은 프레임워크나 전처리기를 전제하지 않은 순수 CSS라, 정한 값이 그대로 붙여넣을 값이고 브라우저가 읽을 순서 그대로입니다.
드래그하면서 감을 잡기 쉽기 때문입니다. 생성된 CSS는 일반적인 rgba() 알파로 변환되므로 그대로 손으로 고쳐도 됩니다.
됩니다. 미리보기를 텍스트로 바꾸면 확인할 수 있습니다. 실제 CSS에서는 background-clip: text와 투명한 글자색이 함께 필요합니다.
아니요. box-shadow, 그라디언트, border-radius, transform, filter 모두 현재 쓰이는 브라우저에서 프리픽스 없이 동작합니다.