Suhenism

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

Coding 코딩/CSS

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

ryusudol 2022. 9. 9. 17:03

Box-Shadow

 

box-shadow image

 

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

 

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

 

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

 

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

 

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

 

 

box-shadow property (From Google)

 

위 사진은 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

box-shadow result

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

'Coding 코딩 > CSS' 카테고리의 다른 글

[CSS Flex Box] justify-content, align-items  (0) 2022.09.09
[CSS @media] 미디어 쿼리 (Media Query) 개념  (0) 2022.09.09
[CSS] font-size 단위 px, em, rem  (0) 2022.09.08
[CSS] box-sizing: content-box / border-box  (0) 2022.09.08
[CSS] 마진겹침(Margin-Collapsing) 현상  (0) 2022.09.08
'Coding 코딩/CSS' Related Articles more