웹마스터 팁

  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)
목록
제목 글쓴이 날짜
팁이라긴.. 약하지만;; Trac을 이용한 최신버전을 다운로드 받자!! [3] file 동균84 2007.11.26
MSN로그인 상태를 홈피좌측 메뉴에 삽입하는 방법 [9] 팔공산 2007.11.27
google base 사용기. font 2007.11.29
메뉴에 이미지버튼 사용하기 [11] 정낙훈(xynex) 2007.11.29
(포인트) 선물하기 [9] Simulz 2007.11.30
위젯배경이미지방 오픈했습니다. [2] file 팔공산 2007.12.03
날씨배너입니다. [4] LooK782 2007.12.03
움직이는 이모티콘 모음입니다. [4] file 범피디 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
음악플레이기 3종세트 설치 방법(수정) [25] file 팔공산 2007.12.10
top 메뉴를 만들어보자 - layout에서 topmenu 항목만들기 [6] file SensePlus1 2007.12.11
로그인 안되서 files 폴더 지우셨던 분들!! [3] file 율랑 2007.12.11
외부페이지 사용법 [8] 길치객 2007.12.11
외부페이지에서 위젯사용하지 않고 로그인 정보 다루기. [5] [1] 길치객 2007.12.12
Layout.html 화일의 SEC(순서도)도를 그려봤습니다. [9] file SensePlus1 2007.12.14
ㅎㅎ, 이곳에도 Html 적용이 되네요. [3] file 눈과비 2007.12.14
태그 쓰기