728x90
반응형
SMALL
1. text-shadow
- 텍스트에 그림자효과를 설정
선택자 { text-shadow: 가로길이 세로길이 번짐정도 색상; }<!DOCTYPE html>
<html lang="en">
<head>
<title>css 텍스트4</title>
<style>
h1 {font-size: 100px;}
.shadow1 {color: salmon; text-shadow: 10px 10px;}
.shadow2 {color: salmon; text-shadow: 10px 10px 5px;}
.shadow3 {color: salmon; text-shadow: 10px 10px 5px black;}
.shadow4 {color: #fff; text-shadow: 10px -10px 5px rgb(26, 175, 212);}
.shadow5 {color: rgb(255, 255, 255); text-shadow: 0 0 8px #000;}
</style>
</head>
<body>
<h1>css 텍스트4</h1>
<h1 class="shadow1">css text-shadow 속성1</h1>
<h1 class="shadow2">css text-shadow 속성2</h1>
<h1 class="shadow3">css text-shadow 속성3</h1>
<h1 class="shadow4">css text-shadow 속성4</h1>
<h1 class="shadow5">css text-shadow 속성5</h1>
</body>
</html>
📄 HTML 파일
728x90
반응형
LIST
'Web > CSS' 카테고리의 다른 글
| [CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 (0) | 2023.03.30 |
|---|---|
| [CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow (0) | 2023.03.30 |
| [CSS] TEXT 설정 - 3️⃣ 텍스트 효과 지우기, 텍스트 밑줄/텍스트 윗줄/ 텍스트 취소선, 작은 대문자 (0) | 2023.03.30 |
| [CSS] TEXT 설정 - 2️⃣ 글자 수평 정렬, 단락 들여쓰기, 줄 높이 (0) | 2023.03.30 |
| [CSS] TEXT 설정 - 1️⃣ 글자 색상, 글자 간격, 띄어쓰기 간격 (0) | 2023.03.30 |
