나는 Figma 파일에서 그림자를 일치시키기 위해 한 번 약 40분을 보냈습니다. 디자이너는 나에게 필요한 모든 색상, X 및 Y 오프셋, 흐림 및 스프레드를 제공했지만 여전히 올바른 모양을 얻을 수 없었습니다. 브라우저의 그림자는 모형보다 무겁고 평평했으며, 그렇게 흐림 반경을 위아래로 계속 밀어내면 문제가 해결될 것입니다.
그것은하지 않을 것,모형은 두 그림자가 쌓여 있었기 때문에. 접촉을위한 꽉 어두운 하나,주변 빛을위한 넓은 부드러운 하나. Figma 내가 무너졌다 패널에서 별도의 레이어로 그들을 보여 주었다. 일단 내가 쉼표로 구분 쌍으로 그들을 쓴 경기는 즉시했다.
이것이 이 가이드의 CSS 속성에 관한 것입니다. 그 중 어느 것도 복잡하지 않습니다. 모두 구문에서 명확하지 않은 하나 또는 두 개의 동작을 가지고 있으며 그 중 하나에게 오후를 잃을 수 있습니다. 이 가이드는 적힌 해당 동작입니다.
여기에 링크된 모든 생성기는 브라우저에서 실행되고 드래그하면서 라이브 미리보기를 업데이트하며 CSS를 건네줍니다. 나는 [Toolz.dev](/에서 그것들을 만들고 끊임없이 사용합니다. 대부분 4 값 약칭을 읽는 것이 직사각형을 보는 것보다 어렵기 때문입니다.
TL;DR: 사용 박스 섀도우 깊이를 위해, 텍스트 그림자 광선과 윤곽선의 경우 테두리 반경 타원형 모서리를 포함한 모서리의 경우 CSS 필터 흐림, 밝기 및 색상 효과를 위해 유리형성 서리로 덥은 패널을 위해, 신형성 부드러운 융기 표면의 경우 그라데이션 배경의 경우 CSS 단위 변환기 rem 에서 px 가 필요할 때. 그들 모두는 라이브 미리보기로 클라이언트 측을 실행합니다. 휴대 할 가치가있는 두 가지 규칙: 실제 그림자는 계층화되어 있습니다
backdrop-filter흐리게하려면 뒤에 뭔가가 필요합니다.
어떤 발전기가 필요합니까?
| 당신은 원해요 | 재산 | 도구 |
|---|---|---|
| 페이지에서 들어 올리는 카드 | box-shadow |
박스 섀도우 |
| 빛나는, 윤곽선 또는 양각 텍스트 | text-shadow |
텍스트 그림자 |
| 둥근 또는 알약 모양의 모서리 | border-radius |
테두리 반경 |
| 요소를 흐리게 하거나 흐리게 하거나 불포화하거나 착색합니다 | filter |
CSS 필터 |
| 사진 위에 반투명 패널 | backdrop-filter |
유리형성 |
| 표면에 눌려 보이는 부드러운 버튼 | 층층이 쌓인 box-shadow |
신형성 |
| 색상 전환 배경입니다 | linear-gradient |
그라데이션 |
| 24px 를 rem 으로 바꾸려면 | 없음 | 단위 변환기 |
이 가이드의 나머지 부분은 각자가하는 일과 물린 곳입니다.
박스-섀도는 어떻게 작동하나요?
약칭은 5가지 값과 색상입니다:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
오프셋은 그림자를 움직입니다. 블러는 가장자리를 부드럽게 하여 각 방향의 블러 값의 대략 절반만큼 바깥쪽으로 퍼집니다. 스프레드는 블러가 적용되기 전에 그림자를 성장시키거나 축소시키며,네거티브 스프레드는 후광이 아닌 요소 아래에 자리잡은 그림자를 위한 트릭입니다.
사람들이 놓치는 부분: 그림자가 쌓인다. 쉼표로 구분된 목록은 앞뒤로 렌더링하고 맨 위에는 첫 번째 그림자가 표시됩니다:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
그 쌍은 왜 디자이너 & # 39;s 그림자가 당신보다 더 좋아 보이는지입니다. 하나의 그림자는 스티커로 읽습니다. 두 개는 무게가있는 물체로 읽습니다. The 박스 섀도우 생성기 레이어를 추가하고 각각을 별도로 드래그할 수 있으며, 이것이 레이어를 조정하는 유일한 건전한 방법입니다.
inset 테두리 상자 내부의 그림자를 이동시킵니다. 이는 움푹 들어간 것처럼 보이는 입력 또는 신형 표면의 내부 절반을 얻는 방법입니다.
실제 프로젝트에서 나를 물린 하나의 성능 노트: 애니메이션 box-shadow 모든 프레임을 강제로 다시 칠합니다. 호버에서 카드를 들어 올리려면 애니메이션을 적용합니다 transform 그리고 더 큰 그림자를 잡아주는 두 번째 요소를 크로스 페이드합니다. The MDN 박스-섀도 참조 구문을 전체적으로 문서화합니다.
문자 그림자는 그림자 외에 어떤 용도로 사용되나요?
같은 생각, 한 값 더 적습니다. text-shadow 확산이 없습니다:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
그것의 흥미로운 용도는 그림자가 전혀 아닙니다.
개요. 제로 블러에 네 개의 하드 그림자, 대각선 당 하나, 텍스트 주위에 스트로크를 가짜. 그것은보다 무겁다 -webkit-text-stroke 그러나 그것은 어디에서나 작동하며 차이를 나누는 것이 아니라 글리프 외부로 렌더링됩니다:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
글로우. 오프셋이 0이고, 흐릿하고, 채도가 높은 색상이 2~3회 반복되어 강도를 높입니다.
이미지에 대한 가독성. 배경이 당신이 통제하지 않는 사진일 때 백색 원본의 밑에 단 하나 연약한 어두운 그림자는 당신에게 대조를 삽니다. 적당한 scrim 를 위한 대용품,그리고 실패하는 대조 비율을 저장하지 않을 것입니다,그러나 밝은 헝겊 조각으로 사라지는 descenders 를 멈춥니다.
세 가지를 모두 구축하세요 텍스트 그림자 생성기. 효과가 아닌 대비 요구 사항을 쫓는 경우 결과를 확인하십시오 WCAG 와 함께 색상 대비 검사기 그것을 눈여겨보는 대신.
경계 반경은 왜 8개의 값을 취합니까?
대부분의 사람들은 하나를 사용합니다. 전체 형태는 슬래시로 구분된 4 개로 구성된 두 그룹입니다:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
슬래시 전: 각 모서리의 수평 반경,왼쪽 위에서 시계 방향으로. 그 후: 수직 반경. 둘 다 주고 각 모서리는 4 분의 1 원이 아닌 타원이 됩니다. 이것이 SVG 없이 유기적 얼룩 모양을 얻는 방법입니다.
알 가치가 있는 두 가지 행동.
백분율은 다른 축에 대해 해결됩니다. 수평 반경입니다 % 는 요소의 백분율's 폭,그 높이의 수직 하나입니다. 그래서 border-radius: 50% 직사각형에는 둥근 직사각형이 아닌 타원이 있어서 처음으로 사람들을 놀라게 합니다.
브라우저는 겹칠 때 반경을 아래로 조정합니다. 인접한 두 반지름이 더해서 공유하는 변보다 더하면 모든 반지름은 맞을 때까지 비례적으로 줄어듭니다. 도형을 넘칠 수 없는 것이 그 이유입니다 border-radius: 9999px 안정적으로 알약을 생산합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 국경 반경 발전기 코너당 슬라이더로 8개의 값을 모두 노출하고 가장 짧고 유효한 약칭을 방출합니다. 이는 손으로 슬래시 형식을 작성하는 것이 정말 불쾌하기 때문에 가질 가치가 있습니다.
CSS 필터는 무엇을 할 수 있으며, 비용은 얼마입니까?
filter 요소 및 그 안의 모든 것에 그래픽 작업을 적용합니다:
filter: blur(4px) brightness(1.1) saturate(1.2);
함수는 왼쪽에서 오른쪽으로 구성되고 순서는 결과를 변경합니다. 흐리게 한 다음 밝게 하는 것은 밝게 한 다음 흐리게 하는 것과 같지 않습니다.
| 기능 | 하다 | 감시하다 |
|---|---|---|
blur() |
가우스 흐림 | 큰 반경에서는 비싸다; 가장자리가 바깥쪽으로 흐려집니다 |
brightness() |
멀티플라이 가벼움 | 1 클립 위 하이라이트를 흰색으로 표시합니다 |
contrast() |
중간 회색에서 값을 푸시합니다 | 세부 사항을 빠르게 분쇄합니다 |
grayscale() |
채도를 제거합니다 | 중복자산보다 저렴합니다 |
sepia() |
따뜻한 톤 맵 | 와 결합하십시오 hue-rotate() 다른 색조를 위해 |
hue-rotate() |
색상이 각도만큼 변합니다 | 인지된 가벼움을 보존하지 않습니다 |
drop-shadow() |
알파를 따르는 그림자 | 달리 box-shadow는, 실제 모양을 따릅니다 |
마지막 행은 기억할 가치가 있는 행입니다. box-shadow 테두리 상자를 그림자로 표시하므로 로고의 투명한 PNG는 직사각형 그림자를 얻습니다. filter: drop-shadow() 알파 채널을 추적하고 로고 자체를 그림자로 표시합니다.
비용은 실제입니다. 필터는 요소를 자체 합성 레이어에 푸시합니다 blur() 특히 넓은 지역에 걸쳐 비싸다. 버튼에 벌금. 저사양 전화의 전체 페이지 오버레이에 두 번 생각. MDN's 필터 참조 모든 함수와 보간 동작을 나열합니다.
조합을 시도해 보세요 CSS 필터 생성기미리보기와 정확한 선언을 나란히 표시합니다.
작동하는 glassmorphism 패널을 어떻게 구축합니까?
서리로 덥은 유리는 일을 하는 1 개의 재산입니다:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter 무엇이 있는지 필터링합니다 뒤에 요소 자체보다는 요소. 세 가지가 그로부터 따라오고,그들은 거의 모든 "why does my glass look like a gray box" 질문.
그 뒤에 뭔가가 필요합니다. 평평한 배경색 위에 흐릿한 배경색은 동일한 평평한 색상입니다. 효과는 사진, 그라데이션 또는 겹치는 콘텐츠 위에만 존재합니다.
배경은 반투명해야 합니다. 완전히 불투명한 배경은 흐릿한 배경을 완전히 숨깁니다. 10%에서 25% 사이의 흰색이 일반적인 범위입니다.
채도가 그것을 파는 것입니다. 실제 유리는 색상을 농축합니다. saturate(180%) 흐림 옆에는 반투명 유리와 얼룩의 차이가 있습니다.
유리에 가장자리가 있기 때문에 헤어 라인 테두리를 추가하고 배송하기 전에 대비를 확인하십시오: 흐린 사진 위의 텍스트는 사진에 따라 통과하거나 실패하며 영웅 이미지에서 완벽하게 읽는 패널은 다음 이미지에서 읽을 수 없을 수 있습니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 유리형성 생성기 이 가이드의 다른 어떤 효과보다 여기서 더 중요한 실제 이미지를 미리 봅니다.
신형성은 사용할 가치가 있는가?
신형성,즉 부드러운 UI 는 요소들이 배경 위에서 떠다니는 것이 아니라 배경에서 돌출된 것처럼 보이게 합니다. 두 개의 그림자,반대 모서리,하나는 표면보다 밝고 하나는 더 어둡습니다:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
압축된 상태로 바꾸거나 사용하세요 inset 새겨진 모습을 위해 둘 다.
이 기술에는 다음과 같은 한 가지 엄격한 제약이 있습니다: 요소와 배경은 동일한 색상이어야 합니다. 효과는 전적으로 두 개의 그림자이므로 다른 배경의 신형 버튼은 돌출된 읽기를 멈추고 깨진 읽기를 시작합니다.
또한 정직할만한 접근성 문제도 있습니다. 전체적인 미학은 건축에 의한 대비가 낮고,부드러운 그림자 만 어포던스 인 버튼은 실패 할 수 있습니다 WCAG's 비 텍스트 대비 요구 사항 인터랙티브 컴포넌트의 경우. 사용하는 경우 버튼에 실제 테두리 또는 그림자에 의존하지 않는 초점 스타일을 지정합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 신형성 생성기 손으로 할 수 있는 까다로운 부분인 표면 색상에서 두 가지 그림자 색상을 모두 파생합니다.
유닛 컨버터는 언제 필요합니까?
생각보다 자주, 디자인 도구는 px를 말하고 좋은 CSS는 종종 말하지 않기 때문입니다.
rem 는 루트 글꼴 크기에 상대적이므로 사용자가 브라우저를 변경할 때 rem의 레이아웃이 확장됩니다's 기본 텍스트 크기. em 에 상대적입니다 요소's 글꼴 크기는 자체 텍스트를 추적해야 하는 패딩에 유용하며 중첩된 요소를 통해 합성될 때 위험합니다.
산술은 사소한 것입니다. 스펙을 번역하는 동안 마흔 번을 하는 것은 실수가 들어오는 곳이며,특히 루트 크기가 16px 가 아닌 경우 더욱 그렇습니다. The CSS 단위 변환기 구성 가능한 루트를 가져와 모든 단위를 한 번에 표시합니다.
그라데이션의 경우 그라데이션 생성기 선형, 방사형 및 원뿔형을 포함하며 더 긴 쓰기가 있습니다 CSS 그라디언트 가이드.
함께 모으기: 카드, 시작부터 끝까지
속성은 거의 단독으로 사용되지 않습니다. 여기에 내가 만들 수있는 방식으로 구축 된 네 가지를 사용하는 카드가 있습니다.
모양과 나머지 그림자로 시작하십시오:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
두 그림자 다시, 둘 다 빛. 휴식 카드는 거의 해제되어야한다. 호버 상태에 대한 드라마를 저장.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 translateY 인식 된 작업의 대부분을 않습니다. 움직임은 더 큰 그림자가하는 것보다 더 설득력 리프트로 읽히고,변환이 다시 칠해지기보다는 합성되기 때문에 저렴합니다.
카드가 평평한 페이지 대신 사진에 있는 경우 흰색 배경을 유리로 바꿉니다:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
무엇이 바뀌었고 무엇이 바뀌지 않았는지 주목하세요. 반지름과 그림자는 손대지 않고 이어집니다. 오직 표면 처리만이 다를 뿐이죠. 유용한 정신 모델입니다: 모양과 깊이는 하나의 결정이고,표면은 또 다른 결정입니다.
브라우저 지원 및 대체는 어떻습니까?
이 중 대부분은 오래되고 안전합니다. box-shadow, text-shadow, border-radius 그리고 filter 수년간 모든 곳에서 지원되었으며, 다시 생각하지 않고도 작성할 수 있습니다.
backdrop-filter 취급할 가치가 있는 예외입니다. 지원은 지금 넓습니다,그러나 그것이 놓칠 때 진짜로 끊긴 보는 결과를 생성하는 1 개의 재산 여기에서 입니다: 15% 백색 배경을 가진 패널은 아무 흐림도 사진에 창백한 번짐을 지키:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
대체는 대부분 불투명한 패널로, 효과는 아니지만 완벽하게 사용할 수 있습니다. 향상된 버전은 브라우저가 제공할 수 있는 경우에만 적용됩니다. MDN's @supports 참조 구문을 다루며 속성에 단순히 단순한 실패 모드가 아닌 시각적으로 손상된 실패 모드가 있는 경우 언제든지 접근할 가치가 있습니다.
프로젝트 전체에서 효과를 일관되게 유지하려면 어떻게 해야 합니까?
실제 코드베이스의 실패 모드는 하나의 나쁜 그림자가 아닙니다. 약간 다른 그림자 열네 개입니다. 왜냐하면 카드가 필요한 모든 사람이 자기 자신의 것을 썼기 때문입니다.
사용자 정의 속성으로 한 번 정의하고 이름을 사용하십시오:
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
일반적으로 세 개의 그림자 단계로 충분합니다. 네 번째 단계를 추가하는 경우 구성 요소에 다른 작업이 필요하기 때문에 종종 발생합니다 고도 다른 그림자가 아니라 기존 단계를 재사용하는 것이 답입니다.
이것은 또한 어두운 모드를 다루기 쉽게 만듭니다. 흰색에서 작동하는 그림자는 어두운 표면에서 보이지 않는 것에 가깝고 깊이는 일반적으로 밝은 테두리 또는 미묘한 빛에서 대신옵니다. 미디어 쿼리 내부의 토큰을 재정의하면 모든 구성 요소가 다음과 같습니다:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
위의 도구로 각 값을 한 번씩 생성하고 토큰 블록에 붙여 넣은 다음 생각을 중지하십시오. 그것이 생성기를 갖는 전체 요점입니다: 손으로 쓸 수없는 CSS 를 작성하는 것이 아니라 한 번만 결정하면되는 값에주의를 기울이는 것을 중단하는 것입니다.
이러한 영향으로 인해 접근성 문제가 발생하는 경우
이 가이드의 모든 속성은 대비를 조작하며,대조는 접근성 요구 사항이 대부분에 관한 것입니다. 네 가지 특정 트랩.
대화형 구성 요소에는 눈에 보이는 경계가 필요합니다. WCAG 2.2에는 3:1 대비가 필요합니다 그것을 식별하는 컨트롤의 부분에 대한. 그의 유일한 가장자리가 부드러운 그림자 버튼은 neumorphism 의 구조적 문제이며 테두리 또는 솔리드 포커스 링이 거기에 선택 사항이 아닌 이유입니다 그 실패 할 수 있습니다.
유리 패널은 그들의 background's 대조 문제를 상속합니다. 서리가 내린 패널의 텍스트는 뒤에있는 사진에 따라 읽을 수 있거나 그렇지 않으며 사진은 종종 변경됩니다. 영웅이 아닌 최악의 이미지에 대해 테스트하십시오. panel's 배경 불투명도를 높이는 것이 일반적으로 텍스트를 더 대담하게 만드는 것보다 더 나은 수정입니다.
필터는 대비를 자동으로 변경합니다. brightness() 그리고 contrast() 컨테이너에 적용은 그 안의 텍스트에도 적용된다. A filter: brightness(1.15) 팝업이 되도록 카드에 있는 본문 텍스트를 4.5:1 임계값 아래로 조용히 밀어 넣을 수 있습니다. 나중에 확인해보세요 색상 대비 검사기, 이전에는 아닙니다.
그림자가 유일한 상태 표시기가 되지 않도록 하십시오. 호버링, 초점 및 누름이 그림자 깊이에 의해서만 다른 경우 키보드 사용자와 시력이 낮은 사람은 구별을 잃습니다. 그림자 변화를 변환, 윤곽선 또는 색상 변화와 쌍을 이룹니다.
이 중 어느 것도 효과를 사용할 수 없게 만들지 않습니다. 가정하기보다는 검증해야 할 것으로 만들어서 대비 검사기가 열려 있는 상태에서 구성 요소당 약 1 분이 소요됩니다.
이 도구들이 내 작품을 어디든 보내주나요?
아니요. 여기의 모든 생성기는 브라우저에서 완전히 실행됩니다. 업로드 단계도 없고 서버 왕복도 없기 때문에 슬라이더를 드래그할 때 즉시 응답합니다. 이는 카탈로그의 나머지 부분이 오프라인으로 작동하는 것과 같은 이유입니다 데이터 개인정보 보호 가이드.
일반적인 실수
- 두 개가 아닌 하나의 그림자. 손으로 쓴 그림자와 디자인한 그림자 사이의 가장 눈에 띄는 차이점입니다.
- 애니메이션
box-shadow호버에. 모든 프레임을 다시 칠합니다. Animatetransform그리고 대신 크로스 페이드. backdrop-filter단색 위에. 흐려질 것이 없으므로 아무 일도 일어나지 않습니다.- 유리 패널에 불투명 한 배경. 방금 작성한 효과를 숨깁니다.
- 일치하지 않는 배경의 신형성. 환상은 그들이 동일하다는 데 달려 있습니다.
border-radius: 50%둥근 직사각형을 기대합니다. 정사각형이 아닌 요소에서는 타원이 나타납니다.- 대비 확인 없이 이들 중 하나를 배송합니다. 그림자와 유리는 모두 대비를 줄이고, 둘 다 좋은 모니터에서 오버 튜닝하기 쉽습니다.
