[CSS] box-shadow 테두리 그림자

Coding 코딩/CSS

[CSS] box-shadow 테두리 그림자

ryusudol 2022. 9. 9. 17:03

Box-Shadow

두 사각형 중에 더 살아있어 보이는 사각형을 고르라 하면

단연 오른쪽을 고를 것이다.

웹페이지 element에 shadow 효과를 넣으면 웹페이지가 더 생동감있어 보인다.

이왕이면 user의 눈을 즐겁게 하는 게 더 훌륭한 UX를 제공하는 데 도움이 될 것이다.

이번 포스팅에선 box-shadow에 대해 간략하게 정리하겠다.

위 사진은 box-shadow property에 대한 설명이다.

box-shadow의 개념은 정말 간단해서 저게 전부다.

순서대로 수평 방향 그림자, 수직 방향 그림자, 그림자 흐릿한 정도, 그림자 퍼뜨리기다.

수평/수직 방향 그림자 value는 반드시 있어야 하나, 나머지는 선택사항이다.

HTML

<body>
    <div class="shadow1"></div>
    <div class="shadow2"></div>
    <div class="shadow3"></div>
    <div class="shadow4"></div>
</body>

CSS

.shadow1, .shadow2, .shadow3, .shadow4 {
  width: 350px;
  height: 70px;
  border: 10px solid cornflowerblue;
  margin: 20px;
}

.shadow1 {
  box-shadow: 5px 5px;
}

.shadow2 {
  box-shadow: 5px 5px 5px;
}

.shadow3 {
  box-shadow: 5px 5px 5px 5px;
}

.shadow4 {
  box-shadow: 5px 5px 5px 5px lightslategray;
}

Result

위의 코드대로 했을 때 다음과 같은 결과가 나온다.

horizontal / vertical offset만 설정하면 첫 째 사각형처럼 딱딱한 그림자가 나온다.

거기서 blur radius를 적용시키면 둘 째 사각형처럼 보다 자연스럽고 부드러운 그림자가 나온다.

그림자가 퍼지는 모양을 만들고 싶으면 spread radius를 설정하면 된다.

마지막 사각형에선 그림자 색 또한 정할 수 있다는 것을 확인할 수 있다.

box-shadow는 순서대로 어떤 value가 들어가는지 보고

이리저리 값을 바꿔가면서 가장 적절한 그림자를 만들어내면 된다 !