섀도우 블록의 설치 길이는 얼마입니까? CSS의 내부 그림자. 작은 거리를 아래로 이동하고 심하게 흐림
요소에 그림자를 추가합니다. 여러 개의 그림자를 사용하여 해당 매개변수를 쉼표로 구분하여 표시할 수 있습니다. 그림자를 적용할 때 목록의 첫 번째 그림자는 더 높고 마지막 그림자는 더 낮습니다. border-radius 속성을 통해 요소에 둥근 반경이 지정되면 그림자의 모서리도 둥글게 됩니다. 그림자를 추가하면 요소의 너비가 늘어나므로 브라우저에 가로 스크롤 막대가 나타날 수 있습니다.
간략한 정보
통사론
상자 그림자: 없음 |<тень> [,<тень>]*
어디<тень>:
삽입<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
명칭
| 설명 | 예 | |
|---|---|---|
| <тип> | 값의 유형을 나타냅니다. | <размер> |
| A && B | 값은 지정된 순서대로 출력되어야 합니다. | <размер> && <цвет> |
| A | 비 | 제안된 값(A 또는 B) 중에서 하나의 값만 선택해야 함을 나타냅니다. | 정상 | 작은 모자들 |
| || 비 | 각 값은 독립적으로 사용하거나 순서에 관계없이 다른 값과 함께 사용할 수 있습니다. | 너비 || 세다 |
| 그룹 값. | [ 자르기 || 십자가 ] | |
| * | 0회 이상 반복합니다. | [,<время>]* |
| + | 한 번 이상 반복합니다. | <число>+ |
| ? | 지정된 유형, 단어 또는 그룹은 선택 사항입니다. | 삽입? |
| (A, B) | A회 이상, B회 이하로 반복하세요. | <радиус>{1,4} |
| # | 쉼표로 구분하여 한 번 이상 반복합니다. | <время># |
가치
없음 그림자 추가를 취소합니다. 삽입 요소 내부에 그림자가 그려집니다.<сдвиг по x>요소를 기준으로 한 그림자의 수평 오프셋입니다. 이 매개변수의 양수 값은 그림자 이동을 오른쪽으로, 음수 값은 왼쪽으로 설정합니다.<сдвиг по y>요소를 기준으로 그림자의 수직 오프셋입니다. 양수 값은 그림자를 아래로 이동하고 음수 값은 위로 이동합니다.<размытие>그림자 흐림 반경을 설정합니다. 이 값이 높을수록 그림자가 더 부드러워지고 더 넓어지고 밝아집니다. 이 매개변수를 지정하지 않으면 기본값은 0이고 그림자는 흐릿하지 않고 선명해집니다.<растяжение>양수 값은 그림자를 늘리고, 음수 값은 그림자를 압축합니다. 이 매개변수를 지정하지 않으면 기본값은 0이며, 이로 인해 그림자가 요소와 동일한 크기가 됩니다.<цвет>사용 가능한 CSS 형식의 그림자 색상, 기본 그림자는 검은색입니다.
매개변수를 쉼표로 구분하여 여러 그림자를 지정할 수 있습니다. 다음 순서가 고려됩니다. 목록의 첫 번째 그림자는 맨 위에 배치되고 목록의 마지막 그림자는 맨 아래에 배치됩니다.
예
예제의 결과는 그림 1에 나와 있습니다. 1.
쌀. 1. 그림자의 종류
객체 모델
객체.style.boxShadow
메모
버전 5.1 이전의 Safari, 버전 10.0 이전의 Chrome, 버전 4.0 이전의 Android는 -webkit-box-shadow 속성을 지원합니다.
버전 4.0 이전의 Firefox는 -moz-box-shadow 속성을 지원합니다.
버전 9.0 이전의 Internet Explorer는 box-shadow 속성을 지원하지 않으며 대신 필터 속성을 사용할 수 있습니다.
필터: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
여기: offX - 수평 그림자 오프셋; offY — 수직 그림자 오프셋; 색상 - 그림자 색상.
드롭섀도우 필터를 사용하면 선명하고 선명한 그림자가 생기므로, 섀도우 필터를 사용하여 블러 효과를 연출할 수 있습니다.
필터: progid:DXImageTransform.Microsoft.shadow(방향=120, 색상=#000000, 강도=10);
여기서: 방향 — 그림자 방향 각도는 0에서 360°까지입니다. 색상 - 그림자 색상; 강도 — 그림자 오프셋(픽셀 단위).
사양
각 사양은 여러 단계의 승인을 거칩니다.
- 권장 사항 - 이 사양은 W3C에서 승인되었으며 표준으로 권장됩니다.
- 후보자 추천 ( 가능한 추천) - 표준을 담당하는 그룹은 목표 달성에 만족하지만 표준을 구현하려면 개발 커뮤니티의 도움이 필요합니다.
- 제안된 권장 사항 제안된 권장 사항) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문위원회에 제출됩니다.
- 작업 초안 - 커뮤니티 검토를 위해 논의되고 수정된 초안의 보다 성숙한 버전입니다.
- 편집자 초안( 편집 초안) - 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
- 초안 ( 초안 사양) - 표준의 첫 번째 초안 버전입니다.
타이포그래피는 웹 디자이너가 가장 좋아하는 장난감입니다. CSS에는 매우 흥미로운 도구가 하나 있습니다. 텍스트 그림자(텍스트 그림자)는 언뜻 보면 매우 단순해 보이지만 독창성과 상상력을 사용하면 도움을 받아 기억에 남는 효과를 만들 수 있습니다.
그림자 기본
재산 텍스트 그림자사용하기 매우 쉽습니다. 접두사를 사용하지 않고도 모든 최신 브라우저에서 지원됩니다. 그러나 IE에서는 (IE9에서도) 지원이 없습니다. Modernizr와 같은 도구를 사용하면 이전 버전의 IE에서도 CSS3 효과를 끌어낼 수 있습니다.
통사론
텍스트 그림자를 만들려면 속성 구문을 사용하십시오. 텍스트 그림자아래에 나와 있습니다. 정의할 매개변수는 4개입니다. 처음 두 매개변수는 그림자의 위치를 설정하고, 세 번째 매개변수는 흐림 수준을 설정하고, 네 번째 매개변수는 그림자의 색상을 결정합니다.
텍스트 그림자:horizontal_offsetvertical_offset 흐림 색상;
아래는 아래로 2픽셀, 오른쪽으로 4픽셀 오프셋되고, 3픽셀씩 흐려지고, 불투명도 30%에서 검정색으로 설정된 텍스트 그림자의 예입니다.
텍스트 그림자: 2px 4px 3px rgba(0,0,0,0.3);
이 속성을 사용한 결과는 다음과 같습니다.
RGBA를 사용하는 이유는 무엇입니까?
속성을 정의할 때 그림자 색상을 지정하기 위해 rgba를 사용할 필요는 없습니다. 그러나 rgba는 그림자를 정의할 때 투명도 수준이라는 또 다른 차원을 추가합니다.
이 방법은 색상을 결정하는 다른 방법보다 훨씬 간단합니다. 배경색보다 약간 더 어둡거나 밝을 수 있는 그림자 색상의 음영을 결정하는 데 집중할 필요가 없습니다. rgba를 사용하면 흰색이나 검정색을 사용하고 불투명도를 높여 색상을 혼합할 때 원하는 배경색을 얻을 수 있습니다.
속성 사용 텍스트 그림자단순한 그림자 효과에 국한되지 않고 텍스트에 다양한 효과를 만들 수 있습니다. 예를 들어, 우울한 텍스트의 환상을 만드는 코드는 다음과 같습니다.
먼저 텍스트 색상을 배경색보다 조금 더 어둡게 설정해야 합니다. 그런 다음 속성을 사용해야합니다. 텍스트 그림자화이트 컬러로 투명도를 높였습니다.
배경색은 #222이고 텍스트 색상은 불투명도 60%로 설정되어 있습니다. 흰색 그림자는 불투명도 10%로 약간 아래쪽 오른쪽에 배치됩니다.
본문( 배경: #222; ) #text h1 ( 색상: rgba(0,0,0,0.6); 텍스트 그림자: 2px 2px 3px rgba(255,255,255,0.1); )
그림자를 흐리게 할 필요는 전혀 없습니다. 선명한 그림자는 웹사이트 디자인과 잘 어울립니다.
텍스트 그림자: 6px 6px 0px rgba(0,0,0,0.2);
진짜 재미는 그림자가 하나뿐이라는 한계를 버릴 때부터 시작됩니다. 쉼표를 사용하여 정의를 구분하면 필요한 만큼 그림자를 사용할 수 있습니다!
텍스트 그림자: 그림자1, 그림자2, 그림자3;
다음은 두 개의 그림자를 사용하는 예입니다. 첫 번째는 배경색과 동일합니다.
텍스트 그림자: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
장거리 하향 변속
여러 그림자를 사용하는 방법에 익숙해지면 결과는 점점 더 극적으로 변할 것입니다. 텍스트에 3D 효과를 만드는 것은 매우 쉽습니다.
이 예에서는 서로 다른 거리에서 아래로 이동하고 흐리게 처리된 4개의 그림자를 사용합니다.
텍스트 그림자: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
작은 거리를 아래로 이동하고 심하게 흐림
여기에 동일한 아이디어의 또 다른 구현이 있습니다. 세 개의 그림자가 더 작은 거리로 이동하고 더 흐려집니다.
텍스트 그림자: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Mark Dotto의 3D 텍스트
이 효과는 MarkDotto.com 웹사이트에서 사용됩니다. 12가지의 서로 다른 그림자를 사용하여 뛰어난 3D 효과를 만들어냅니다.
텍스트 그림자: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Gordon Hall이 들여쓴 텍스트
위의 예에서 나는 내 기술을 "빠르고 더러운" 활판 인쇄 효과라고 불렀습니다. 훨씬 더 믿을만한 진지하게 삽입된 텍스트를 만드는 훨씬 더 복잡한 방법이 있기 때문입니다.
Gordon은 외부 그림자뿐만 아니라 실제 내부 그림자도 끌어내기 위해 진지한 CSS 부두교를 사용합니다. 이 기술에 대한 전체 설명은 그의 블로그 게시물을 확인하세요.
배경색: #666666; -웹킷-배경-클립: 텍스트; -moz-배경-클립: 텍스트; 배경 클립: 텍스트; 색상: 투명; 텍스트 그림자: rgba(255,255,255,0.5) 0px 3px 3px;
불타는 듯한 빛깔
텍스트 그림자: 0px 0px 6px rgba(255,255,255,0.7);
텍스트 그림자: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
다중 광원
텍스트 그림자: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
색상: rgba(0,0,0,0.6); 텍스트 그림자: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
결론
대부분의 CSS 효과와 마찬가지로 그림자도 구현하기가 매우 쉽습니다. 하지만 단순한 행동의 조합으로 놀라운 효과를 얻을 수 있습니다.
페이지의 블록 요소 아래에 있는 그림자는 일반적으로 3차원 효과를 생성하거나 요소에 주의를 끌거나 디자인의 일부로 사용됩니다. 요소 아래의 작은 그림자도 페이지의 볼륨과 깊이를 제공합니다.
그림자를 추가하려면 6개의 값이 있는 box-shadow 속성을 사용하세요. 그 중 2개만 필요합니다. 그림에서. 그림 1은 가능한 모든 값을 식별하기 위해 번호가 매겨진 box-shadow 속성을 보여줍니다.
쌀. 1. 상자 그림자 속성 값
- inset 키워드는 요소 내부에 그림자를 설정합니다.
- 그림자를 수평으로 이동합니다(5px - 오른쪽, -5px - 왼쪽).
- 수직 이동(5px - 아래, -5px - 위로);
- 그림자 흐림 반경(0 - 선명한 그림자);
- 그림자 늘이기(5px - 늘이기, -5px - 축소);
- 그림자 색상.
수평 및 수직 이동만 지정해야 하며 다른 모든 매개변수는 기본적으로 사용됩니다. 이 경우 그림자는 흐릿하거나 검지 않고 선명해집니다.
다양한 매개변수와 해당 값을 결합하면 다양한 유형의 그림자를 얻을 수 있습니다. 테이블에 1은 코드와 그에 따른 결과를 보여줍니다.
| 암호 | 결과 | 설명 |
|---|---|---|
| 상자 그림자: 5px 5px; | 오른쪽과 아래에 날카로운 그림자가 있습니다. | |
| 상자 그림자: -5px -5px; | 왼쪽과 위쪽에 날카로운 그림자가 있습니다. | |
| 상자 그림자: 0 0 5px; | 요소 주위의 흐린 그림자. | |
| 상자 그림자: 0 0 5px 2px; | 그림자를 2픽셀 확장합니다. | |
| 상자 그림자: 0 0 5px 2px 빨간색; | 요소 주위에 빨간색 빛이 납니다. | |
| 상자 그림자: 0.4em 0.4em 5px rgba(122,122,122,0.5); | 반투명 그림자. | |
| 상자 그림자: 삽입 0 0 6px; | 내부의 그림자. |
표에서 볼 수 있듯이 그림자 이동을 픽셀 단위로 지정할 필요는 없지만 편리합니다. 그림자의 색상은 사용 가능한 모든 형식으로 지정할 수 있습니다. 예를 들어 반투명 그림자를 얻으려면 RGBA 형식이 적합합니다. 이러한 그림자는 어떤 배경에서도 잘 보입니다. 예제 1에서는 이를 수행하는 방법을 보여줍니다.
예 1: 배경 그림의 그림자
HTML5 CSS3 IE 9+ Cr Op Sa Fx
적의 깃발이 완벽하게 정렬되어 있을 때 맞서지 마십시오. 난공불락인 적의 진영을 공격하지 마십시오. 이것이 바로 변화관리입니다.
손자, 트랜스. 니콜라이 콘라드
이 예의 결과는 그림 1에 나와 있습니다. 2. 그림자는 블록 모서리의 둥근 부분을 따릅니다.
쌀. 2. 배경사진에 그림자가 나타나는 현상
"넓은" 그림자를 추가할 때 브라우저 창의 보이는 경계를 넘어 확장되어 가로 스크롤 막대가 나타날 수 있다는 점에 유의하세요.
의사 요소에도 그림자를 추가할 수 있는데, 이는 복잡한 레이아웃에 필요한 경우도 있습니다. 그림에서. 그림 3은 섀도우가 추가된 헤더 블록을 보여줍니다. 교차점에 선이 생기지 않도록 하려면 ::after 의사 요소를 사용하고 여기에 그림자를 추가해야 합니다.
쌀. 3. 그림자로 차단하기
예제 2는 그러한 블록의 생성을 보여줍니다.
예 2. 그림자가 있는 블록
HTML5 CSS3 IE 9+ Cr Op Sa Fx
표제
요소는 하나 이상의 그림자를 가질 수 있지만 동시에 여러 개를 가질 수 있으며 해당 매개변수는 box-shadow 속성 값에서 쉼표로 구분되어 나열됩니다. 예제 3에서는 모든 이미지에 이중 그림자를 추가하는 방법을 보여줍니다.
예 2. 그림자가 있는 블록
HTML5 CSS3 IE 9+ Cr Op Sa Fx
이 예의 결과는 그림 1에 나와 있습니다. 4.
쌀. 4. 이중 그림자 이미지
첫 번째 그림자는 20px의 흐림 반경으로 이미지 왼쪽에 표시되며 크기는 네 번째 매개변수(-20px)만큼 줄어듭니다. 두 번째 그림자의 매개변수는 소수점 뒤에 표시되며 그림자는 그림 오른쪽에 표시되며 대칭을 위해 축소됩니다.
블록 섀도우는 웹 사이트 블록에 사실감과 볼륨감을 부여하는 탁월한 3차원 효과입니다. 공부를 시작할 당시(5~6년 전쯤)에는 존재 자체에 대해 전혀 모르고 사이트를 만들 때 블록의 그림자를 이미지로 만들어야 했는데요. 매우 불편했고, 항상 원하는 대로 되지는 않았습니다. 웹 디자이너의 작업을 더 쉽게 만들어준 CSS의 힘 덕분입니다. 오늘은 CSS에서 블록의 그림자를 만드는 방법을 보여 드리겠습니다.
CSS에 그림자를 추가하려면 속성을 사용하십시오. 상자 그림자 .
1. 그림자를 수평으로 이동합니다(오른쪽으로 최대 100px, 왼쪽으로 최대 -100px).
2. 수직 이동(아래로 최대 100px, 위로 -100px까지);
3. 그림자 흐림(0 - 선명한 그림자, 100 - 매우 흐린 그림자)
4. 그림자를 늘립니다(최대 100px - 늘이기, 최대 -100px - 압축).
5. 그림자 색상;
6. 삽입 - 그림자는 요소 내부에 있으며 삽입이 없으면 그림자는 바깥쪽으로 나타납니다.
HTML을 배우기 시작했을 때(약 5~6년 전)에는 CSS의 존재에 대해 전혀 몰랐고, 사이트를 만들 때 블록의 그림자를 이미지로 만들어야 했습니다.
결과 :
그림자가 있는 테이블:
| 암호 | 예: |
| 상자 그림자: 0px 13px 17px -6px #000000; |  |
| 상자 그림자: 10px -10px 0px -6px #000000; |  |
| 상자 그림자: 10px 13px 0px -6px #000000; |  |
| 상자 그림자: 1px 1px 32px -6px #000000; |  |
| 상자 그림자: -1px 23px 41px -25px #000000; |  |
| 상자 그림자: -1px 23px 41px -25px #4dc13c; |  |
| 상자 그림자: -10px -10px 40px -6px #000000 삽입; |  |
| 상자 그림자: 7px 10px 23px -8px #92a9e7; |  |
그림자를 사용하면 3차원 블록을 만들 수 있습니다.
| 암호 | 예 |
| 상자 그림자: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0); |  |
| 상자 그림자: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193) ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188) ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0); |  |
| 상자 그림자: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191, 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0) ); |  |
| 상자 그림자: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193) ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188 ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0); |  |
Blok1( 너비: 70%; 최대 너비: 550px; 여백: 10px 자동; 패딩: 1em; 상자 그림자: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) 삽입; )
결과 :
Blok1(너비: 30%; 최대 너비: 550px; 여백: 2em 자동; 패딩: 1em; 배경: #DADADA; 상자 그림자: 6px 6px #BBBBBB, 12px 12px #919191; )
결과 :
Blok1( 너비: 30%; 여백: 0 자동; 패딩: 2em; 상자 그림자: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )
결과 :
그림자를 사용하면 아름다운 프레임을 만들 수 있습니다.
속성을 활용한 아름다운 프레임상자- 그림자
Blok1(너비: 20%; 최대 너비: 250px; 여백: 0 자동; 패딩: 1em; 테두리: 2px 점선 #999; 상자 그림자: 0 0 0 1px #999, 삽입 0 0 0 1px #999; )결과 :
Blok1(너비: 30%; 최대 너비: 250px; 여백: 2em 자동; 패딩: 4em; 배경: #dcc005; 상자 그림자: 0 0 4em 4em #fff 삽입; )
결과 :
Blok1( 최대 너비: 250px; 여백: 0 자동; 패딩: 1em; 테두리 반경: 10px; 배경: rgb(100,100,100) 방사형 그라데이션(0 0의 원, rgba(255,255,255,.65), rgba(255,255,255, .35)); 상자 그림자: 삽입 rgba(0,0,0,.5) -3px -3px 8px, 삽입 rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3픽셀 3픽셀 8픽셀 -3픽셀; )
결과 :
CSS의 상자 그림자
웹사이트
결과 :
이러한 아름다운 효과는 CSS의 그림자를 사용하여 얻을 수 있습니다. 새롭고 독창적인 것을 생각해 보세요. 모든 것이 당신의 손에 달려 있습니다. 당신은 지식과 능력을 가지고 있습니다.
그리고 언젠가는 Photoshop을 사용하지 않고 어떻게 만들 수 있는지에 대한 기사를 게시할 예정입니다. 그러니 모든 일의 중심에 서서 내 블로그 업데이트를 구독하세요. 관심 있는 주제를 놓치지 마세요. 글쎄요, 행운을 빌어요!!!box-shadow CSS 속성을 사용하여 요소에 그림자를 추가하고 모양을 변경할 수 있습니다. 이 스타일을 사용하면 블록의 볼륨 및 3차원성과 같은 흥미로운 효과를 실현할 수 있습니다. 이 속성은 모든 최신 브라우저에서 지원됩니다. IE8과 Opera Mini는 예외입니다.
box-shadow 속성: 구문
이 스타일은 다음과 같이 작성됩니다.
상자 그림자: 삽입 4px 4px 8px 5px #333333;
각 매개변수가 담당하는 역할을 순서대로 살펴보겠습니다(왼쪽에서 오른쪽으로).
- 예어삽입: 지정할 필요가 없는 매개변수; 그림자를 그린다 내부에요소.
- X 오프셋: 요소를 기준으로 그림자가 수평으로 오프셋되는 정도를 지정합니다. 양수 값은 오른쪽으로 이동하고 음수는 왼쪽으로 이동함을 의미합니다. 값이 0이면 그림자가 오프셋되지 않음을 의미합니다.
- Y 시프트: 그림자의 수직 변위량을 지정합니다. 양수 값은 하향 이동을 의미하고, 음수 값은 상향 이동을 의미합니다. 값 0은 이동이 없는 그림자입니다.
- 흐림 반경: 그림자가 흐려지는 정도입니다. 값이 높을수록 그림자가 더 흐려집니다. 매개변수를 지정하지 않으면 기본값은 0입니다. 이 경우 그림자는 완벽하게 선명해집니다.
- 확대: 두 축을 따라 그림자를 늘리는 선택적 매개변수입니다. 값이 높을수록 늘어나는 정도가 커집니다. 확장은 이전 매개변수가 있는 경우에만 작동합니다. 기본값은 0입니다.
- 그림자 색상: 이 매개변수를 사용하면 모든 것이 명확해집니다. 요소의 그림자 색상을 설정합니다. 기본 색상은 검정색입니다.
메모. Android 브라우저 및 이전 버전의 iPhone Safari에서는 box-shadow CSS 속성이 올바르게 작동하려면 -webkit- 접두사가 필요합니다.
이 속성은 여러 값 그룹을 사용할 수 있습니다(동시에 여러 그림자 만들기). 이렇게 하려면 이러한 매개변수 그룹을 쉼표로 구분하여 나열해야 합니다. 예를 들어:
상자 그림자: 15px 15px 20px #8b0163, 삽입 15px 15px 20px #630046;
상자 그림자 예
CSS box-shadow 속성의 강력함과 아름다움을 더 잘 이해할 수 있도록 안전하게 실제로 적용할 수 있는 몇 가지 예를 보여 드리겠습니다. 이 속성은 일반 블록을 크게 변형시킬 수 있습니다!
밝은 그림자
상자 그림자: 0 2px 4px rgba(0, 0, 0, .25);
종이효과
상자 그림자: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), 삽입 0 0 40px rgba(0, 0, 0, .1); 
다중 레이어
상자 그림자: 6px 6px #ccc, 12px 12px #a3a3a3; 
트리플 프레임
상자 그림자: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 
코너
상자 그림자: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
보시다시피, box-shadow 속성은 상상의 여지를 많이 남겨줍니다. 원하는 대로 블록을 변형할 수 있습니다. 가장 중요한 것은 비례감을 갖는 것입니다! 😉
다음 장에서는 요소의 크기를 결정하는 너비와 높이 속성을 살펴보겠습니다.
