지난 포스트에서 다룬 <div> 태그 등으로 만든 박스에 그림자 효과를 주는 또다른 방법입니다.
이번에는 박스의 안쪽에 그림자를 넣어서 박스가 안으로 들어간 것처럼 보이게 만들겠습니다.
box-shadow: inset
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
box-shadow: 속성의 가장 앞에 inset을 넣어주시면 그림자가 박스의 안쪽에 생깁니다.
inset 다음으로 들어가는 속성 값 다섯가지는 지난 포스트와 동일합니다.
a는 그림자가 오른쪽으로 얼마나 이동할 것인가,
b는 그림자가 아래쪽으로 얼만큼 이동할 것인가,
c는 그림자의 부드러운 정도,
d는 그림자의 확장량, e는 그림자의 색상입니다.
shadow
위의 소스 코드로 이렇게 박스의 안쪽에 그림자가 생기면서 입체감이 생기게 되었습니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스에 그림자 넣기 (0) | 2021.02.17 |
|---|---|
| CSS 박스의 모서리를 둥글게 라운딩 처리하는 방법 (0) | 2021.02.14 |
| CSS 박스의 배경에 그라데이션 넣기 (0) | 2021.02.12 |
| CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 (0) | 2021.02.10 |
| CSS 리스트 태그의 번호 디자인 변경 (0) | 2021.02.08 |
댓글