06-01_text-shadow.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-01_text-shadow</title>
<!--
	# text-shadow
	- 글자에 그림자 효과 지정.
	- text-shadow : offset-x | offset-y | blur-radius | shadow-color
	  > offset-x     : 그림자의 수평거리(필수)
	    offset-y     : 그림자의 수직거리(필수)
	    blur-radius  : 그림자의 흐림 정도
	    shadow-color : 그림자의 색  
-->
<style type="text/css">
.s_1 { text-shadow: 5px 5px; }
.s_2 { text-shadow: 5px 5px 8px;}
.s_3 { text-shadow: 5px 5px 8px red; }
.s_4 { text-shadow: 0px 0px 2px blue; }
.s_5 {
	color: white;
	text-shadow: 0px 0px 8px red;
}
.s_6 {
	color: white;
	text-shadow: 3px 3px 10px red;
}
.s_7 { 
	font-size: 30px;
	color: yellow;
	text-shadow: 3px 3px 5px black, 0 0 10px orange;
}

.s_8 {
		
}

.s_9 {
	
}

.s_10 {
	color: white;
	text-shadow: 0px 0px 5px black, -5px -5px 10px gray, -5
}

p {
	border: 1px solid red;
	width: 500px;
	margin: 20px;
	padding: 20px 0;
	text-align: center;
	font-family: "맑은 고딕", sans-serif;
	font-size: 40px;
	font-weight: bold;
}

.ps_1 {
	background-color: silver;
	text-shadow: 3px 3px 3px rgba(255, 255, 255, 1);
}
.ps_2 {
	background-color: orange;
	color: white;
	text-shadow: 3px 3px 3px silver;
}

</style>
</head>
<body>
	<h1>text shadow</h1>
	<br>
	<h2 class="s_1"> Text Shadow </h2>
	<h2 class="s_2"> Text Shadow </h2>
	<h2 class="s_3"> Text Shadow </h2>
	<h2 class="s_4"> Text Shadow </h2>
	<h2 class="s_5"> Text Shadow </h2>
	<h2 class="s_6"> Text Shadow </h2>
	<h2 class="s_7"> Text Shadow </h2>
	<h2 class="s_8"> Text Shadow </h2>
	<h2 class="s_9"> Text Shadow </h2>
	<h2 class="s_10"> Text Shadow </h2>
	<br>
	<p class="ps_1"> Text Shadow </p>
	<p class="ps_2"> Text Shadow </p>
</body>
</html>