웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

text-shadow 본문

css3

text-shadow

jokack01 2013. 10. 8. 09:25

text-shadow

 

text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수 있다.

 

  • h-shadow : 글자의 수평 그림자 위치를 지정하며 음수값도 허용
  • v-shadow : 글자의 수직 그림자 위치를 지정하며 음수값도 허용
  • Blur : 흐림정도의 값을 지정
  • Color : 색상값을 지정

 

ex1) 텍스트에 그림자 주기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px #FF0000;
/* x, y, 블러값, 색상코드 */
}
</style>
</head>
<body>
<h1>Text-shadow!!</h1>
<p>
    text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고
    흐림정도와 색상값을 따로 줄 수 있다
</p>
</body>
</html>



ex2) 입체적인 그림자 주기 

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
h1
{
text-shadow:
1px 1px lightblue,
2px 2px lightblue,
3px 3px lightblue,
4px 4px lightblue;
/*컴마로 구분하여 입체적인 느낌을 줄 수도 있다.*/
}
</style>
</head>
<body>
<h1>Text-shadow!!</h1>
<p>
    text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고
    흐림정도와 색상값을 따로 줄 수 있다
</p>
</body>
</html>

'css3' 카테고리의 다른 글

font-face  (0) 2013.10.08
word-wrap  (0) 2013.10.08
background  (1) 2013.10.02
box-shadow  (0) 2013.10.02
border-image  (0) 2013.10.02
'css3' Related Articles more