*효과를 극명하게 보여주기 위해 예쁘지 않은 색을 선택했다. 이해 바람..
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 |
