WEB/CSS3-CONCEPT

예제 4-19. text-shadow 프로퍼티로 텍스트 그림자 만들기

너래쟁이 2017. 11. 4. 18:53

 

1
2
3
4
5
6
text-shadow : h-shadow v-shadow blur-radius(선택) color|none
 
h-shadow, v-shadow : 원본 텍스트와 그림자 텍스트 사이의 수평/수직 거리(필수)
blur-radius : 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이(선택)
color : 그림자 색
none : 그림자 효과 
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 그림자</title>
<style>
div {
    font: normal 24px verdata;
}
div.red {
    text-shadow : 3px 3px red; (blur-radius가 없음)
}
div.blur {
    text-shadow : 3px 3px 5px red;
}
</style>
</head>
<body>
<div class="red">Drop Shadow</div>
<div class="blur">Drop Shadow</div>
</body>
</html>
 
cs


예제 4-19.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 그림자</title>
<style>
div {
    font : normal 24px verdata;
}
.dropText {
    text-shadow : 3px 3px;
}
.redText {
    text-shadow : 3px 3px red;
}
.blurText {
    text-shadow : 3px 3px 5px skyBlue;
}
.glowEffect {
    text-shadow : 0px 0px 3px red;
}
.wordArtEffect {
    color : white;
    text-shadow : 0px 0px 3px darkBlue;
}
.threeDEffect {
    color : white;
    text-shadow : 2px 2px 4px black;
}
.multiEffect {  /* 3개의 효과 동시 적용 */
    color : yellow;
    text-shadow : 2px 2px 2px black,
               0 0 25px blue,
               0 0 5px darkblue;
}
</style></head>
<body>
<h3>텍스트 그림자 만들기</h3>
<hr>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class="threeDEffect">3D Effect</div>
<div class="multiEffect">Multiple Shadow Effect</div>
</body>
</html>
 
cs







 

저작자표시 비영리 동일조건