웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
그림자 박스 만들기..
2007.12.07 09:01
별것 아니지만... xe 팁도 아니지만... 올려봅니다..
div 위치에 맞춰 그림자 를 나오게 하는것..
예전에 Style을 몰랐을때.. 정말 노가다 해서 만들었는데.. =ㅁ=;;
아주 간단하게 되버리니.. 흑흑..
아시는 분은 Pass~~~
이런 BOX 만드는 방법 입니다.
1. 간단한 그림자 box 코드
2. 그림자 box 스타일 지정
보시면 금방 이해 되실듯 합니다.
질문은 댓글로~
div 위치에 맞춰 그림자 를 나오게 하는것..
예전에 Style을 몰랐을때.. 정말 노가다 해서 만들었는데.. =ㅁ=;;
아주 간단하게 되버리니.. 흑흑..
아시는 분은 Pass~~~
이런 BOX 만드는 방법 입니다.
1. 간단한 그림자 box 코드
<div id="box" class="shadow"> <div id="box" class="textbox"> 이건 그림자 박스입니다.<br /> 유용하려나? </div> </div>
2. 그림자 box 스타일 지정
#box {font-size:9pt;} /* shadow class 의 속성 지정 shadow가 밖을 둘러 싸고 있기 때문에 이 style 에 따라 textbox도 같이 크기, 이동 등 같이 적용 됩니다. 이 style을 응용하여 반투명(IE에서) 도 만들어 보세요 */ .shadow { position:relative; top:10px;left:10px; background-color:black;width:100px;} /* 이 box를 -2 씩 움직이면 당연히 뒤에 남아 있는 shadow 보다 -2씩 움직여 뒤에 그림자가 남게 됩니다. */ .textbox { position:relative; top:-2px;left:-2px; background-color:#FFCC00; padding:3px}
보시면 금방 이해 되실듯 합니다.
질문은 댓글로~
댓글 3
-
Bok-e
2007.12.07 10:10
-
guny
2007.12.07 13:16
.shadow { position:relative; top:10px;left:10px; background-color:black;width:100px;} .textbox {font-size:9pt; position:relative; top:-2px;left:-2px; background-color:#FFCC00; padding:3px}
<div class="shadow"> <div class="textbox"> 이건 그림자 박스입니다.<br /> 유용하려나? </div> </div>
-
aaaaaaaaaa
2008.01.12 20:59
이건 그림자 박스입니다.
유용하려나?
간단한 div 팁이네요 ^^
역시 좋은 div...ㅎㅎ