CSS box-shadow 그림자로 음각 효과 내기

css box-shadow를 이용해

음각 효과를 내보겠습니다.

 

---

1. CSS box-shadow

div{
	box-shadow:inset 3px 3px 3px #333;
}

inset

box-shadow 속성에서

inset을 설정해주면 그림자가

안쪽에 생기는데 이것이 들어간 모양으로 보입니다.

 

-

 

box-shadow 속성 값

숫자로 된 속성 값은

순서대로 세로, 가로, 흐리게 값입니다.

 

흐리게 하는 부분은 생략이 가능하지만

세로와 가로 값은 꼭 적어주셔야 합니다.

 

마지막으로 색상 코드를 적으면

box-shadow를 사용할 수 있습니다.

 

-

 

---

2. box-shadow 예제

 

codepen에서 보기

그림자가 어떤 식으로 들어가는지

예제를 만들어봤습니다.

 

코드와 실제 적용 모습을 보면서 참고해주세요.

 

 

---

3. box-shadow 다른 속성 값

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

box-shadow - CSS: Cascading Style Sheets | MDN

box-shadow MDN

mdn 사이트에서

box-shadow의 더 자세한 설명을

확인해보실 수 있습니다.

 

 

---

이상으로 css box-shadow로 음각 효과를 내는 방법을 알아보았습니다.

도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.

 

 

[같이 보면 좋은 포스팅]

[coding/html + css] - css 그라데이션 쉽게 넣기

css 그라데이션 쉽게 넣기

[coding/html + css] - css background 단축 속성

css background 단축 속성

 

그럼 이만.

총총.