<CSS 기초> 14. Box-shadow & Opacity

1. Box shadow

 이는 말그대로 박스에 그림자를 주는 속성이다. box-shadow 의 값은 다음과 같이 5개의 값이 순서대로 들어간다.

 

  h-offset v-offset blur spread color

 

 왼쪽부터 x값 y값 흐린정도 그림자크기 색상을 의미한다. spread를 생략해도 되지만 순서대로 5개를 사용하는 것을 추천한다. 

 

 box-shadow: 0 10px 16px 0 rgba(255,75,75,0.5) ;

 

 위와 같이 입력하면 붉은색의 그림자가 만들어진다.

 

 참고로 2020년의 UI 트렌드인 빛과 그림자로 사물을 보여주는 Neumorphism도 구현이 가능하다. 

 

https://neumorphism.io/#55b9f3

  위 사이트는 Neumorphism을 만들어서 css코드로 제공받을 수 있다.

 

2. Opacity

 Opacity속성은 투명도를 나타낸다. 

 

  opacity : 0.5 ;

 

 위와 같이 작성할 수 있으며, 투명한 0부터 완전히 불투명한 1까지 설정가능하다.

 

 

 

---

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU