본문 바로가기

CSS/learned_it_today

Box Shadow

*효과를 극명하게 보여주기 위해 예쁘지 않은 색을 선택했다. 이해 바람..

 

 

 

0. 기본 셋팅

 

<style>
      .container {
        display: flex;
      }
      .box {
        padding: 1rem;
        margin: 1rem;
        background: palevioletred;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel!</p>
      </div>
      <div class="box">
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel!</p>
      </div>
      <div class="box">
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, vel!</p>
      </div>
    </div>
  </body>

 

 

 

 

1. offset-x | offset-y | color

 /* offset-x | offset-y | color */
box-shadow: 10px 20px teal;

 

offset-x는 박스 shadow 오른쪽 두께

offset-y는 박스 shadow 아래쪽 두께

color는 box-shadow 색깔

 

 

 

 

 

2. Negative values

/* Negative values */
box-shadow: -5px -20px teal;

offset-x, offset-y 값 헷갈리지 않기 위해서 값을 좀 극단적으로 선택했다.

offset-x 값을 음수로 설정하면 왼쪽에 box-shadow

offset-y 값을 음수로 설정하면 위쪽에 box-shadow

 

 

 

 

 

3. offset-x | offset-y | blur-radius | color

/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 5px 20px teal;

offset-x, offset-y값과 color 값 사이

말 그대로 blur 효과

 

 

 

 

 

 

 

4. offset-x | offset-y | blur-radius | spread-radius | color

 /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.3);

 

 

 

 

 

 

5. inset | offset-x | offset-y | color

 

/* inset | offset-x | offset-y | color */
box-shadow: inset -3px -3px teal;

 

 

 

 

 

6. Multiple Shadows

 /* Multiple shadows */
box-shadow: 3px 3px teal, -3px -3px black;

콤마 기준으로 원하는 shadow 두 개를 넣어주면 된다.

자주 사용할 것 같지는 않다.

'CSS > learned_it_today' 카테고리의 다른 글

CSS Transitions  (0) 2020.07.02
CSS Animations  (0) 2020.07.01
before & after Pseudo Selector (feat.포토샵 없이 배경 이미지 흐리게)  (0) 2020.07.01
nth-child Pseudo Selector  (0) 2020.07.01
Targeted Selector  (0) 2020.07.01