몇 년 동안 내 그림자는 가짜처럼 보였고 그 이유를 알 수 없었습니다. 나는 글을 쓸 것이다 box-shadow: 0 5px 10px black,진흙투성이의 회색 후광을 얻고,그것을 어렴풋이 불만스럽게 느끼며 계속 나아갑니다. 카드는 그림자가 아니라 멍이 든 것처럼 보였습니다. 제가 존경했던 디자인 시스템 - 카드가 진정으로 떠있는 것처럼 보이는 시스템 - 을 떼어 내기 시작했을 때 비결이 실현되었습니다. 그들은 결코 하나의 그림자를 사용하지 않습니다. 그들은 두세 개를 쌓고 각각 다른 일을하며 결과는 빛이 실제로 행동하는 방식으로 행동하는 빛으로 읽습니다.
나는 생계를 위해 React와 Tailwind에서 인터페이스를 구축하고, 그림자가 많은 시각적 계층 구조를 전달하는 WP Adminify에서 WordPress 관리 테마를 유지하고 구축했습니다 CSS 상자 그림자 생성기 텍스트 편집기에서 다중 레이어 그림자를 손으로 조정하고 결과를보기 위해 다시로드하는 것에 지쳤기 때문에 Toolz.dev 에서이 가이드는 내가 배운 모든 것입니다 box-shadow 속성: 각 값이 수행하는 작업, 레이어링이 작동하는 이유, 일반적인 트랩을 피하는 방법, 생성기를 사용하여 몇 분 안에 빈 요소에서 프로덕션 CSS로 이동하는 방법.
TL;DR: CSS
box-shadowX 오프셋, Y 오프셋, 흐림 반경, 확산 반경 및 색상을 선택 사항으로 사용합니다inset키워드. 흐림은 가장자리를 부드럽게; 확산은 흐려지기 전에 그림자를 성장 또는 축소. 실제 고도는 하나의 shadow's 불투명도를 크랭킹에서가 아니라 여러 쉼표로 구분된 그림자를 쌓는 데서 비롯됩니다. 낮은 불투명도 검정,작은 Y 오프셋,넉넉한 흐림,약간 부정적인 확산을 사용하십시오 - 그런 다음 생성기에서 CSS 를 바로 복사하십시오.
box-shadow 속성은 실제로 무엇을 합니까?
box-shadow element's 테두리 상자 주위에 하나 이상의 그림자를 칠하고 속성은 에 지정됩니다 CSS 배경 및 경계 레벨 3. 단일 그림자에 대한 구문은 다음과 같습니다:
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
오프셋이 필요합니다; 흐림, 확산, 색상은 선택 사항이지만 거의 항상 설정됩니다. 튜닝할 때 제가 생각하는 방식으로 각자가 제어하는 내용은 다음과 같습니다:
오프셋 X 그림자를 수평으로 움직입니다. 양수 값은 오른쪽,음수 왼쪽으로 밀어냅니다. 대부분의 인터페이스 그림자에 대해 0 또는 그 근처에서 이것을 원합니다. 왜냐하면 현실 세계의 빛은 일반적으로 위에서 오기 때문에 그림자를 옆으로 떨어지지 않고 똑바로 아래로 던지기 때문입니다.
오프셋 Y 그림자를 수직으로 이동시킵니다. 양수 값은 아래로 밀어내는데,이는 페이지 위에 앉은 것처럼 보이는 요소에 대해 원하는 것입니다. 이것은 "high" 요소가 느끼는 방식을 가장 잘 제어하는 단일 값입니다.
흐림 반경 sodelens the shadow's edge.0 의 값은 단단한 모양처럼 단단한 그림자를 준다; 더 큰 값은 부드러움을 밖으로 퍼뜨린다. 이것은 부정적 일 수 없다. 거의 모든 자연스러워 보이는 그림자는 Y 오프셋보다 몇 배 더 큰 흐림을 사용한다.
확산 반경 흐림이 적용되기 전에 그림자의 크기를 변경합니다. 긍정적 인 확산은 모든 방향에서 그림자를 크게 만듭니다; 부정적인 확산은 그것을 축소시킵니다. 부정적인 확산은 단단하고 믿을 수있는 카드 그림자를위한 비밀 무기입니다. 왜냐하면 그림자를 끌어 당겨 요소 너머로 피가 나지 않기 때문입니다.
색상 유효한 CSS 색깔입니다. 제일 공용영역 그림자는 낮은 불투명도에 까맣거나 가까운 까만 - 같이 무언가를 사용합니다 rgba(0, 0, 0, 0.1) - 완전히 불투명한 회색이 아니라 반투명한 검정색이 실제 그림자처럼 뒤에 있는 모든 것을 착색하기 때문입니다.
왜 좋은 그림자는 한 겹 이상을 사용하는가?
이것은 나의 그림자를 완전하게 변화시킨 아이디어이다,그래서 그것의 자신의 단면도를 얻는다. 단 하나 그림자는 단 하나,균일한 blob 이다. 진짜 그림자는 획일하지 않다. 그림자가 더 어둡고 예리한 대상에 가까운; 멀리 더 밝고 더 확산된다. 당신은 그림자를 겹쳐 쌓여서 그 낙진을 근사한다.
고전적인 조리법은 2 개의 층입니다: 바삭바삭한 기초를 주는 요소에 가깝게 앉는 단단하고, 경미하게 더 어두운 그림자, 더하기 주위 확산을 제공하는 그것의 밑에 더 연약하고, 더 넓고, 더 밝은 그림자: 같이 무언가
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
브라우저는 쉼표로 구분된 그림자를 순서대로 그리며,첫 번째 그림자가 맨 위에 있습니다. 각 레이어는 저렴하며,두 개 또는 세 개는 함께 진정한 깊이로 읽혀지므로,어떻게 튜닝하든 단일 그림자가 할 수 없는 방식으로 생성기가 단일 슬라이더 세트가 아닌 레이어 주위에 구축되는 이유가 바로 이것입니다 CSS 상자 그림자 생성기 카드, 승강, 부동과 같은 사전 설정이 모두 다층으로 제공되므로 외로운 얼룩 대신 현실적인 베이스에서 시작할 수 있습니다.
내가 사용하는 정신 모델: 고도 수준에서 생각하십시오. 휴식 카드는 작고 단단한 그림자와 함께 낮게 앉습니다. 드롭 다운 또는 팝오버는 더 크고 부드러운 그림자와 함께 더 높게 앉습니다. 모달은 무엇보다도 가장 높은 곳에 앉습니다. 고도가 높아진다는 것은 하나의 그림자를 어둡게하는 것이 아니라 모든 레이어에서 Y 오프셋과 흐림을 함께 증가시키는 것을 의미합니다.
내면의 그림자는 어떻게 만들까?
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 inset 키워드는 emplement's 패딩 박스를 바깥쪽으로 캐스팅하는 대신 안에 그림자를 뒤집습니다. 추가 inset 그림자 선언의 앞면으로 요소 내에 페인트를 칠합니다:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
내부 그림자는 컨트롤을 누르거나 움푹 들어가거나 새겨지는 것처럼 보이게 만드는 방법입니다. 텍스트 입력은 텍스트가 내부에 있음을 암시하는 미묘한 삽입 그림자로 더 잘 읽히는 경우가 많습니다. 누른 버튼 상태는 외부 그림자를 내부 그림자로 바꿔 물리적으로 우울함을 느낄 수 있습니다. 그리고 전체 신형성 경향은 한 방향의 밝은 삽입과 다른 방향의 어두운 삽입을 결합하는 데 기반을 두고 있습니다. 생성기에서 삽입은 레이어당 단일 토글이므로 동일한 요소에 삽입과 시작 그림자를 혼합할 수 있습니다. 이것이 바로 신형 표면에 필요한 것입니다.
Box Shadow Generator 는 어떻게 사용하나요?
흐름은 제가 실제로 일하는 방식과 일치하도록 설계되었습니다. Open the CSS 상자 그림자 생성기 그리고 이미 적용된 사실적인 카드 사전 설정이 있는 미리보기 요소에 도달하므로 빈 캔버스를 쳐다보는 일이 없습니다.
원하는 것에 근접하기 위해 사전설정을 선택합니다 - 미묘함,카드, 상승,부동, 내부,광채, 신형,또는 샤프. 각각은 전체 레이어 스택을 로드합니다. 그런 다음 레이어를 선택하고 슬라이더로 조정합니다: 오프셋 X,오프셋 Y,흐림, 스프레드는 각각 자체 제어 기능과 더불어 색상 선택기,불투명도 슬라이더,삽입 토글을 가지고 있습니다. 미리보기는 드래그하면서 실시간으로 업데이트되므로 숫자를 편집하고 결과를 상상하는 것이 아니라 직접 그림자를 형성하고 있습니다.
더 많은 깊이가 필요한 경우 레이어를 추가하십시오. 레이어가 아무 것도 유용하지 않으면 제거하십시오. 밝은 카드와 어두운 카드 사이에서 미리보기를 전환하는 배경 토글이 있는데,이는 밝은 카드에서 완벽하게 보이는 그림자가 사라지거나 어두운 카드에서 보기 흉한 회색 고리로 변할 수 있기 때문에 중요합니다. 배송하기 전에 두 가지를 모두 확인하면 왕복이 절약됩니다.
행복할 때 CSS 를 복사하세요. 평야를 잡을 수 있습니다 box-shadow 선언 또는 다음을 포함하는 블록입니다 -webkit-box-shadow 아주 오래된 WebKit 빌드를 지원해야 하는 경우 접두사. 스타일시트,스타일링된 구성 요소 또는 Tailwind 임의 값에 붙여넣으면 완료됩니다.
사이트의 모든 도구와 마찬가지로 브라우저에서 완전히 실행됩니다. 아무 것도 업로드되지 않으며 로드된 후에도 오프라인으로 계속 작동합니다. 이는 제가 설명하는 것과 동일한 클라이언트 측 접근 방식입니다 데이터 개인정보 보호 가이드.
실제 사용 사례
설계 시스템을 위한 고도 척도 구축
새로운 프로젝트를 설정할 때 모든 구성 요소가 자체 그림자를 발명하도록하는 대신 고정 된 고도 수준 세트를 정의합니다. 보통 그것은 & quot;resting card" & quot;modal." 까지의 4 ~ 5 단계입니다; 나는 생성기에서 각각을 만들고 CSS 를 복사하여 명명 된 값으로 내 디자인 토큰에 떨어 뜨립니다. 모든 카드,메뉴 및 대화 상자는 레벨을 참조하므로 전체 제품은 일관된 조명 모델을 공유합니다. 텍스트 편집기에서 손으로이 작업을 수행하는 것은 비참합니다; 라이브 미리보기로 수행하는 데는 몇 분이 걸립니다.
실제로 카드를 띄우는 것
기본 본능은 하나의 어두운 그림자이며, 붙여 넣기처럼 보입니다. 수정 사항은 2 층 조리법입니다: 작은 Y 오프셋과 네거티브 스프레드가있는 단단한 레이어는 카드를 고정하고, 주변 조명을 위해 아래에 더 넓고 부드러운 레이어를 시작합니다 카드 또는 상승 된 사전 설정, 값의 맛을 살짝 밀면 윤곽선이 아닌 들어 올려진 것으로 읽는 카드를 얻습니다.
압박되고 집중된 상태를 디자인합니다
상호 작용하는 의견은 그림자에서 수시로 삽니다. 단추는 그것의 외부 그림자의 대부분을 잃고 육체적으로 밀린 느끼기 위하여 압박에 작은 삽입을 얻을 수 있습니다. 입력은 우물 같이 보이기 위하여 영원한 미묘한 삽입을 나를 수 있습니다. 이들은 삽입을 전환하고 시사회를 지켜서 시제품에 빠르,아주 작은 부호를 위한 많은 지각한 폴란드어를 추가합니다.
신형 표면
소프트-UI 룩을 사용하려면 동일한 요소에 반대 방향을 가리키는 두 개의 그림자, 즉 어두운 것은 오른쪽 아래로, 밝은 것은 왼쪽 위로 필요하므로 표면이 배경에서 돌출된 것처럼 보입니다. Neumorphic 사전 설정은 이를 설정하고 색상, 불투명도 및 흐림을 특정 배경과 일치하도록 조정합니다. 순백색도 순흑색도 아닌 배경에서만 작동하므로 어두운 배경 토글을 사용하면 확인하는 데 도움이 됩니다.
박스-섀도 대 필터: 드롭-섀도
자주 받는 질문: 언제 사용해야 하나요 filter: drop-shadow() 대신 box-shadow? 그들은 비슷해 보이지만 다르게 행동하며,잘못된 선택은 실제 버그를 유발합니다.
| 특징 | 상자 그림자 | 필터: drop-shadow() |
|---|---|---|
| 따라간다 | 직사각형 테두리 상자입니다 | 실제 보이는(투명하지 않은) 픽셀입니다 |
| 위한 최고의 | 카드, 단추, 패널, 입력 | 로고, 아이콘, 투명도가 있는 PNG, 불규칙한 모양 |
| Inset을 지원합니다 | 예 | 아니요 |
| 지원 확산 | 예 | 아니요 |
| 여러 그림자 | 네, 쉼표로 구분되어 있습니다 | 예, 필터를 연결하여 가능합니다 |
| 레이아웃에 영향을 줍니다 | 아니요 | 아니요 |
짧은 버전: 일반 직사각형 요소의 경우 다음을 사용하십시오 box-shadow - 그것은 더 유능하고,그것은 확산과 삽입을 지원하고,이 발전기가 생산하는 것입니다. 에 도달 drop-shadow() 직사각형 그림자가 잘못 보일 수 있는 로고나 컷아웃 아이콘과 같은 투명하거나 불규칙한 모양을 추적하기 위해 그림자가 필요한 경우에만 해당됩니다.
고급 팁과 함정
몇 가지 내가 불에 타버린 것들. 첫째,그림자가 잘립니다 overflow: hidden 조상에게. 당신의 아름다운 그림자가 신비하게 잘려나간다면,조상이 그것을 자르고 있는 것입니다 - 그림자 방을 주거나,아니면 옮기십시오 overflow 다른 곳에서 통치하십시오. 왜냐하면 box-shadow 레이아웃에 영향을 미치지 않으며 이웃 요소를 밀어붙이지 않습니다. 이는 기능이지만 형제 아래 그림자가 조용히 확장될 수 있음을 의미하기도 합니다.
둘째, 많은 요소의 거대한 흐림은 특히 애니메이션 시 페인트 성능에 비용을 초래할 수 있습니다. 스크롤에서 그림자를 애니메이션화하거나 긴 목록을 가로질러 마우스를 가져가면 프레임 속도를 확인하세요; 때로는 정적 그림자를 보유하는 의사 요소에 불투명도를 애니메이션화하는 것이 더 저렴합니다. CSS가 완료되면 이를 실행합니다 CSS 미니파이어 장황한 다층 그림자가 추가하는 추가 바이트를 깎습니다.
셋째,그림자 색상은 검정색보다 더 될 수 있다는 것을 잊지 마십시오. 매우 미묘하게 착색 된 그림자 - 순수한 검정색이 아닌 surface's 색조의 어두운 버전 - 종종 중성 회색보다 풍부 해 보입니다. 왜냐하면 실제 그림자는 주변 색상을 포착하기 때문에 불균형 한 보상이있는 작은 움직임입니다.
더 넓은 CSS 툴킷을 조립하는 경우 웹 개발자 툴킷 가이드 다른 브라우저 기반 유틸리티 중에서 섀도우 작업이 적합한 위치를 다루고, 섀도우가 완료되면 다음을 수행합니다 그라데이션 생성기 그리고 컬러 피커 표면 스타일링을 둥글게 처리하세요. 접근성이 마음에 든다면,이것을 the 와 짝을 지어주세요 색상 대비 검사기 따라서 그림자가 있는 카드에 있는 콘텐츠는 계속 읽을 수 있습니다.
자주 묻는 질문
CSS 박스 섀도우 속성은 무엇입니까?
box-shadow 는 element's 프레임 주위에 하나 이상의 그림자를 추가합니다. 각 그림자는 수평 오프셋,수직 오프셋,선택적 흐림 반경,선택적 확산 반경 및 색상을 사용하며 옵션 삽입 키워드는 상자 내부에 그림자를 그립니다. 여러 그림자는 쉼표로 구분되어 첫 번째 그림자가 맨 위에 그려집니다.
블러와 스프레드의 차이점은 무엇입니까?
흐림 반경은 그림자 가장자리를 부드럽게 하므로 값이 클수록 더 확산됩니다. 확산 반경은 흐려지기 전에 shadow's 크기를 변경합니다: 양의 확산은 모든 방향으로 커지는 반면 음의 확산은 축소됩니다. 이는 그림자가 가장자리를 지나가는 대신 카드 아래에 단단히 고정되도록 유지하는 방법입니다.
CSS에서 내부 그림자를 어떻게 생성합니까?
그림자에 삽입 키워드를 추가합니다. inset 는 element's 패딩 박스 안쪽에 그림자를 압박된 단추,입력 우물,신성형 표면에 유용한 외부 대신에 그립니다. 발전기에서 삽입 스위치를 토글하면 선택한 레이어에 자동으로 추가됩니다.
하나의 요소에 여러 상자 그림자를 사용할 수 있습니까?
예. 쉼표로 구분된 단일 상자 그림자 선언에 여러 그림자를 나열할 수 있으며 브라우저는 첫 번째 그림자가 맨 위에 있는 순서대로 그림자를 그립니다. 더 작고 어두운 그림자 아래에 부드럽고 넓은 그림자를 겹쳐 놓는 것이 고도를 붙여 넣기보다는 사실적으로 보이게하는 표준 방법입니다.
내 상자 그림자가 잘리는 이유는 무엇입니까?
조상이 오버플로: 히든을 가졌거나 요소가 클리핑 컨테이너의 가장자리에 있을 때 그림자가 잘립니다. 그림자 공간을 주거나 오버플로: 히든 규칙을 다른 요소로 이동합니다. box-shadow 는 레이아웃에 영향을 주지 않기 때문에 이웃 요소를 절대 밀지 않으므로 형제 아래서 조용히 확장할 수도 있습니다.
박스 섀도우와 필터 : 드롭 섀도우의 차이점은 무엇입니까?
box-shadow 는 element's 직사각형 테두리 상자를 따르므로 PNG 또는 불규칙한 모양 내부의 투명한 영역을 무시합니다. filter: drop-shadow()는 투명도가 있는 로고 및 아이콘에 적합한 실제 보이는 픽셀을 추적합니다. 표준 직사각형 카드 및 버튼의 경우 box-shadow는 올바른 선택이며 drop-shadow가 제공하지 않는 스프레드 및 삽입을 지원합니다.
box-shadow에 -webkit- 접두사가 여전히 필요합니까?
최신 브라우저의 경우 아니요. box-shadow 는 접두사가 없고 수년 동안 널리 지원되었습니다. 생성기가 출력할 수 있는 접두사 블록은 매우 오래된 WebKit 빌드를 지원해야 하는 경우에만 유용하며 대부분의 프로젝트에서는 표준 box-shadow 속성만으로도 충분합니다.
이 상자 그림자 생성기가 내 데이터를 어디든 보내나요?
...이 아닌 . 미리보기 및 CSS 출력은 JavaScript를 사용하여 브라우저에서 완전히 생성됩니다. 업로드 또는 저장된 값이 없으며, 페이지가 로드된 후에도 네트워크 연결 없이 도구가 계속 작동합니다.
