프로그래밍/CSS 3.0
그림자 효과 추가하기 -box-shadow
쇠주는참이슬
2012. 3. 20. 13:08
CSS3 스타일입니다.
IE9 or 크롬 or 파이어폭스에서는 그냥 작동하지만
IE9 이하 브라우저에서는 선수 작업을 해줘야겠지요.
방법은? CSS 게시판 첫글에!!!
이미지에 shadow 효과주기
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset=utf-8">
<title>border-radius</title>
<style>
.shadowed {
box-shadow:5px 5px 10px #000; (가로, 세로, 번지기정도, 그림자색상)
-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
}
</style>
</head>
<body>
<img class="shadowed" src="cross.JPG" width="200" height="230">
</body>
</html>
텍스트에 shadow효과
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset=utf-8">
<title>border-radius</title>
<style>
p {
font-family: Arial;
font-size:50px;
}
.text1 {
color:#06F;
text-shadow:3px 3px 5px #000;
}
.text2{
color:#C30;
text-shadow:3px -3px 5px #000;
}
</style>
</head>
<body>
<p><span style="color:#06F">HTML5</span> & <span style="color:#C30">CSS3</span> </p>
<p><span class="text1">HTML5 </span> & <span class="text2">CSS3</span></p>
</body>
</html>