웹마스터 팁

  2. Support
  3. 웹마스터 팁

그림자 박스 만들기..

2007.12.07 09:01

소마세월

별것 아니지만... xe 팁도 아니지만... 올려봅니다..

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}

보시면 금방 이해 되실듯 합니다.

질문은 댓글로~
이 게시물을
좋아요(+1)
목록
제목 글쓴이 날짜
날씨배너입니다. [4] LooK782 2007.12.03
실시간 날씨를 불러오는 박스 입니다. [13] file 범피디 2007.12.03
움직이는 이모티콘 모음입니다. [4] file 범피디 2007.12.04
"파일첨부"가 클릭이 안되시는 분 보셔요. [11] 최강협 2007.12.04
외부페이지에서 매개변수 사용가능하도록 하는 방법 [12] 라르게덴 2007.12.05
XE 설치 진행 후 다시 첫 화면으로 넘어갈때 [2] longkee 2007.12.06
익명게시판 - 문제가 아직 많습니다. (다시 수정) [11] file 올챙이 2007.12.06
배경이미지 만드는 방법입니다. 팔공산 2007.12.06
그림자 박스 만들기.. [3] file 소마세월 2007.12.07
[수정] 최근 이미지 추출에 new 이미지 등이 나타나게 하기... [5] 비나무 2007.12.09
음악플레이기 3종세트 설치 방법(수정) [25] file 팔공산 2007.12.10
top 메뉴를 만들어보자 - layout에서 topmenu 항목만들기 [6] file SensePlus1 2007.12.11
로그인 안되서 files 폴더 지우셨던 분들!! [3] file 율랑 2007.12.11
권한없는 모듈을 만났을때 로그인 페이지 띄우기.. [10] 똑디 2007.12.11
외부페이지 사용법 [8] 길치객 2007.12.11
외부페이지에서 위젯사용하지 않고 로그인 정보 다루기. [5] [1] 길치객 2007.12.12
페이지가 갑자기 하얀화면으로 나올경우에는 이렇게 해보십시오. [9] file 하나로45 2007.12.13
Layout.html 화일의 SEC(순서도)도를 그려봤습니다. [9] file SensePlus1 2007.12.14
ㅎㅎ, 이곳에도 Html 적용이 되네요. [3] file 눈과비 2007.12.14
최근 댓글이 가장 위로 정렬 [2] 쏘프티 2007.12.20
태그 쓰기