📢 text-shadow는 CSS에서 텍스트에 그림자 효과를 추가하는 속성입니다.
📝 text-shadow 기본 문법
text-shadow: x-offset y-offset blur-radius color;
x-offset : 그림자의 가로 위치(오른쪽으로 이동은 양수, 왼쪽은 음수)
y-offset : 그림자의 세로 위치(아래쪽 이동은 양수, 위쪽은 음수)
blur-radius (선택 사항) : 흐림 효과의 정도 (값이 클수록 더 흐려짐)
color : 그림자의 색상
🎨 일반 text-shadow 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
/* background-color: #333; */
}
h1 {
font-size: 50px;
text-transform: uppercase;
}
/* 기본 그림자 효과 */
/* 회색 그림자가 오른쪽 아래로 퍼지게 됩니다. */
h1.text-shadow1 {
text-shadow: 4px 4px 6px gray;
}
/* 여러 개의 그림자 적용 */
/* 쉼표(,)를 사용하면 여러 개의 그림자를 겹칠 수 있습니다. */
/* 빨간색 그림자가 오른쪽 아래로, 파란색 그림자가 왼쪽 위로 퍼지게 됩니다. */
h1.text-shadow2 {
text-shadow: 2px 2px 5px red, -2px -2px 5px blue;
}
/* 네온(Glow) 효과 */
/* 초록색 빛이 번지는 네온사인 효과가 나타납니다. */
h1.text-shadow3 {
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
}
/* 3D 텍스트 효과 */
/* 텍스트가 입체적으로 보이게 됩니다. */
h1.text-shadow4 {
text-shadow: 1px 1px 0 #999, 2px 2px 0 #666, 3px 3px 0 #333;
}
/* 윤곽선(Outline) 효과 */
/* 텍스트 주위에 테두리가 생겨 강조됩니다. */
h1.text-shadow5 {
text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
}
</style>
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>
<h1 class="text-shadow2">Hello, Welcome to world!</h1>
<h1 class="text-shadow3">Hello, Welcome to world!</h1>
<h1 class="text-shadow4">Hello, Welcome to world!</h1>
<h1 class="text-shadow5">Hello, Welcome to world!</h1>
</body>
</html>
👉 결과
🎨 다양한 text-shadow 사용법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #333;
}
/* ✨ 부드러운 빛나는 효과 */
h1.text-shadow1 {
font-size: 80px; /* 글자 크기 설정 */
color: gold; /* 글자 색상을 금색으로 설정 */
text-transform: uppercase; /* 글자를 대문자로 변환 */
text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5);
/* 그림자를 30px 정도 흐릿하게 설정하여 빛나는 효과 */
}
/* 🏆 입체적인 그림자 효과 */
h1.text-shadow2 {
font-size: 80px; /* 글자 크기 설정 */
color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
text-transform: uppercase; /* 글자를 대문자로 변환 */
text-shadow:
5px 5px 0px darkblue, /* 첫 번째 그림자 (진한 파란색) */
10px 10px 0px dodgerblue; /* 두 번째 그림자 (밝은 파란색) */
/* 두 개의 그림자를 겹쳐서 입체적인 그림자 효과 */
}
/* ☁️ 은은한 그림자 효과 */
h1.text-shadow3 {
font-size: 80px; /* 글자 크기 설정 */
color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
text-transform: uppercase; /* 글자를 대문자로 변환 */
text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
/* 하얀색 반투명 그림자를 적용하여 은은한 효과 */
}
/* 🔵🔴 양쪽으로 퍼지는 입체적인 그림자 효과 */
h1.text-shadow4 {
font-size: 80px; /* 글자 크기 설정 */
color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
text-transform: uppercase; /* 글자를 대문자로 변환 */
text-shadow:
2px 2px 5px red, /* 오른쪽 아래 방향으로 퍼지는 붉은 그림자 */
-2px -2px 5px blue; /* 왼쪽 위 방향으로 퍼지는 푸른 그림자 */
/*
🔹 효과 설명:
- 빨간색 그림자가 오른쪽 아래 방향으로 흐릿하게 퍼짐
- 파란색 그림자가 왼쪽 위 방향으로 흐릿하게 퍼짐
- 결과적으로 텍스트가 입체적으로 보이는 효과를 연출
*/
}
</style>
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>
<h1 class="text-shadow2">Hello, Welcome to world!</h1>
<h1 class="text-shadow3">Hello, Welcome to world!</h1>
<h1 class="text-shadow4">Hello, Welcome to world!</h1>
</body>
</html>
👉 결과
'프로그래밍 > html+css+js' 카테고리의 다른 글
| [css] display 속성 정리 block / inline / inline-block (0) | 2025.03.20 |
|---|---|
| [HTML+CSS] button 태그 css 버튼 스타일 꾸미기 (2) | 2025.01.29 |
| [HTML+CSS+JavaScript] CSS font-face 사용법 (1) | 2025.01.19 |
| [HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기 (1) | 2025.01.19 |
| [HTML+CSS+JavaScript] CSS font-family 사용법 (1) | 2025.01.17 |