티스토리 뷰

프로그래밍/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>

'프로그래밍 > CSS 3.0' 카테고리의 다른 글

HTML5 + CSS3 만으로 아쿠아 버튼 만들기  (0) 2012.03.20
CSS3 투명도 조절 opacity  (0) 2012.03.20
모퉁이 잡아당겨서 크기 조절하기. resize 속성  (0) 2012.03.20
first-child, last-child  (0) 2012.03.20
가상요소 before, after  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
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
글 보관함