[HTML/CSS] 박스 그림자 투명도 설정하기 (box-shadow)

 

이전 포스팅에서는 

CSS의 box-shadow 속성을 사용하여

박스에 그림자를 만들어주는 방법을 알아보았습니다.

[HTML/CSS] div 박스에 그림자 만들기(box-shadow)

[HTML/CSS] div 박스 그림자 한쪽만 만들기(위, 아래, 오른쪽, 왼쪽)

 

이번에는

box-shadow로 생성한 그림자에 투명도를 지정해 주는 방법을 알아보려고 합니다.

 

 

투명도 설정하기

box-shadow 속성에는, 투명도를 설정할 수 있는 항목이 따로 없습니다.

그래서, 그림자의 투명도를 지정하기 위해서는

color 항목을 rgba형식을 사용해서 표현해야 합니다.

color를 표현하는 방법 중 하나인 rgba는

'red, green, blue, alpha' 이렇게 4가지 값을 지정할 수 있는데,

이 중, alpha는 불투명도를 나타냅니다.

자세한 사용법은 아래 링크의 포스팅을 참조하세요.

[CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA))

 

 

그림자에 투명도 설정하기 예제

<div class='ex01'>ex01</div>
<div class='ex02'>ex02</div>
<div class='ex03'>ex03</div>

.ex01 {
  box-shadow: 10px 10px 5px rgb(0, 0, 0);
}

.ex02 {
  box-shadow: 10px 10px 5px rgb(0, 0, 0, 0.2);
}

.ex03 {
  box-shadow: 10px 10px 5px rgb(0, 0, 0, 0.6);
}

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
  margin: 20px;
  text-align : center;
  line-height : 100px;
}

box-shadow: 10px 10px 5px rgb(0, 0, 0);

그림자의 컬러를 rgb 형식으로 표현하였습니다.

이때, a 값이 생략되면 기본값은 1입니다.

 

box-shadow: 10px 10px 5px rgb(0, 0, 0, 0.2);

box-shadow: 10px 10px 5px rgb(0, 0, 0, 0.6);

그림자의 컬러를 rgb 형식으로 표현하고,

a값을 0.2와 0.6으로 지정하였습니다.

a값은 0~1까지의 값을 가지는데,

1이 가장 불투명하고, 0이 가장 투명합니다.