프리카운터넷

프로그래밍&개발

기존 공부방

입체버튼 만들기 .first : 처음 띄었을때의 모양 .over : 마우스가 올라갔을때의 모양 .down : 마우스를 눌렀을때의 모양 onMouseOver : 마우스가 올라갔을때 onMouseOut: 마우스가 내려갔을때 onMouseDown : 마우스를 눌렀을때 onMouseUp : 마우스를 눌렀다가 떼었을때 border-color:#B15604 #E89B57 #E89B57 #B15604; 순서대로 상(위쪽),우(오른쪽),하(아래쪽),좌(왼쪽) 의 색상을 의미한다. 입체적인 표현을 좀더 자연스럽게 할려면 색깔을 잘 조정해야 한다. 위의 예는 "상,좌" 를 같게 하고 바탕보다 밝은색을 지정, "우,하" 를 같게 하고 바탕보다 어두은 색을 지정하면 볼록한 느낌을 준다. 그 반대로 주면 들어간 느낌을 준다.

행복하세요^^


	[소스] <style type="text/css"> a:visited {text-decoration:none; color:white;} a:link {text-decoration:none; color:white;} a:hover {text-decoration:none; color:white;} .first {border:1 solid #D76704; color:white;text-align:center;padding:2 0 0 2} .over {border-style:solid; border-width:1; border-color:#E89B57 #B15604 #B15604 #E89B57; color:white; text-align:center;padding:2 0 0 2} .down {border-width:1; border-style:solid; border-color:#B15604 #E89B57 #E89B57 #B15604; color:white; text-align:center; padding:2 0 0 2} </style> <body bgcolor=cccccc> <table width="120" height="20" cellpadding="0" cellspacing="0"> <tr> <td class="first" onMouseOver="this.className='over'" onMouseOut="this.className='first'" onMouseDown="this.className='down'" onMouseUp="this.className='over'"> <font style="font-size:9pt;color:black">행복하세요^^</font> </td> </tr> </table> </body>