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

 

지난 번에는

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

그림자를 만드는 방법을 알아보았습니다.

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

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

 

이번에는 이것을 응용하여, 

박스의 위쪽, 아래쪽, 오른쪽, 왼쪽에만 그림자를 만들어보겠습니다.

 

 

box-shadow

먼저 잠깐, box-shadow에 지정할 수 있는 값들을 살펴보겠습니다.

• offset-x, offset-y
  • 그림자의 위치를 지정하는 값입니다.
  • offset-x: 양수이면 그림자가 오른쪽으로, 음수이면 그림자가 왼쪽으로 이동합니다.
  • offset-y: 양수이면 그림자가 아래쪽으로, 음수이면 그림자가 위쪽으로 이동합니다.
• blur-radius
  • 그림자의 블러정도를 나타냅니다.
• spread-radius
  • 그림자의 크기를 나타냅니다.
• color
• inset

더 자세한 설명과 예제는 이전 포스팅을 참조하세요.

 

 

그림자 한쪽만 만들기(아래, 위, 오른쪽, 왼쪽)

<div class='ex01'>아래</div>
<div class='ex02'>위</div>
<div class='ex03'>오른쪽</div>
<div class='ex04'>왼쪽</div>

.ex01 {
  box-shadow: 0px 15px 5px -2px gray;
}

.ex02 {
  box-shadow: 0px -15px 5px -2px gray;
}

.ex03 {
  box-shadow: 15px 0px 5px -2px gray;
}

.ex04 {
  box-shadow: -15px 0px 5px -2px gray;
}

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

box-shadow: 0px 15px 5px -2px gray;

그림자를 아래쪽에만 만들기 위해서

offset-x값을 0px로 하고, offset-y값을 15px로 하였습니다.

여기서는 5px 정도의 blur 값을 지정하였는데,

이 블러처리 때문에 오른쪽과 왼쪽에 약간의 그림자가 삐져나오게 됩니다.

이렇게 오른쪽과 왼쪽에 삐져나오는 그림자를 숨기기 위해서

spread-radius 값을 음수로 지정하여, 그림자의 크기를 줄였습니다.

 

box-shadow: 0px -15px 5px -2px gray;

그림자가 위쪽에만 생성됩니다.

offset-y 값을 음수로 지정하였습니다.

 

box-shadow: 15px 0px 5px -2px gray;

그림자가 오른쪽에만 생성됩니다.

 

box-shadow: -15px 0px 5px -2px gray;

그림자가 왼쪽에만 생성됩니다.