1. box-shadow
객체에 그림자 효과를 줄 때 box-shadow 속성을 사용한다.
다음 코드를 실행시키면 주황색 정사각형 뒤로 흰색 그림자가 생긴 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
box-shadow: 0 0 30px white;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
그림자 효과를 주는 box-shadow 속성 부분을 보면 이렇게 되어있는데, 각 위치에 있는 값의 역할은 다음과 같다.
- 첫번째 값: 그림자의 가로 위치(사각형 정 가운데가 0)
- 두번째 값: 그림자의 세로 위치(사각형 정 가운데가 0)
- 세번째 값: 그림자의 블러 크기
- 네번째 값: 그림자 색상
그럼 아래 코드가 의미하는 것은 "사각형 정 가운데로부터 30px 반경을 가진 흰색 그림자를 만들어 달라"가 된다.
box-shadow: 0 0 30px white;
각 값을 조절해서 다양한 형태의 그림자 효과를 줄 수 있다.
2. text-shadow
box-shadow 속성으로는 div에 대해서 그림자 효과를 줄 수 있다. 이모지 같은 텍스트에 그림자 효과를 주기 위해서는 text-shadow 속성을 사용하면 된다.
다음 코드를 실행시키면 촛불 이미지 뒤로 후광이 생긴 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.emoji {
font-size: 100px;
text-shadow: 0 0 100px white;
}
</style>
</head>
<body>
<div class="emoji">🕯️</div>
</body>
</html>
각 위치에 있는 값의 역할은 box-decoration과 동일하다.
text-shadow: 0 0 100px white;
'Web > CSS' 카테고리의 다른 글
| [CSS] CSS로 삼각형 그리기 (0) | 2024.10.22 |
|---|
