웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능
2002.06.27 11:31
<style>
<!--
body {
scrollbar-face-color:#F0F0F0;
scrollbar-shadow-color:gray;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#F0F0F0;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#F0F0F0;
scrollbar-arrow-color:#F0F0F0
}
a:link { color: #595959; text-decoration: none}
a:visited { color: #595959; text-decoration: none}
a:active { color: #595959; text-decoration: none}
A:hover { color: #0099FF; text-decoration:none; position:relative; top:1; left:1;}
-->
</style>
<SCRIPT LANGUAGE="javascript">
function winscroll(){
window.scroll(window.event.clientX - 30,window.event.clientY -30)
}
document.onmousemove = winscroll
</SCRIPT>
위 스타일과 스크립트는 마우스가 텍스트에 오버시에 텍스트가 왼쪽으로1픽셀 그리고 위로 1픽셀 정도 움직여서 버튼에 느낌이 들게 하는 것입니다.
제 홈에 사용한 스크롤도 같이 올립니다.
그리고 스타일 밑에 스크립트는 마우스 움직임 만으로 스크롤을 움직일수 있는 스크립트입니다.
이 소스는 제로보드 관리자 모드에서 "그룹설정" 에서 "게시판 상단에 출력할 내용" 에 그대로 복사해서
넣으시면 그 효과를 보실수 있습니다.
스크립트의 경우 보드를 인클루트사용시에는 그 효과가 나타나지 않습니다.
많은 분들이 간단한 스크립트 만으로 홈페이지를 이쁘게 꾸미실수있습니다.
<!--
body {
scrollbar-face-color:#F0F0F0;
scrollbar-shadow-color:gray;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#F0F0F0;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#F0F0F0;
scrollbar-arrow-color:#F0F0F0
}
a:link { color: #595959; text-decoration: none}
a:visited { color: #595959; text-decoration: none}
a:active { color: #595959; text-decoration: none}
A:hover { color: #0099FF; text-decoration:none; position:relative; top:1; left:1;}
-->
</style>
<SCRIPT LANGUAGE="javascript">
function winscroll(){
window.scroll(window.event.clientX - 30,window.event.clientY -30)
}
document.onmousemove = winscroll
</SCRIPT>
위 스타일과 스크립트는 마우스가 텍스트에 오버시에 텍스트가 왼쪽으로1픽셀 그리고 위로 1픽셀 정도 움직여서 버튼에 느낌이 들게 하는 것입니다.
제 홈에 사용한 스크롤도 같이 올립니다.
그리고 스타일 밑에 스크립트는 마우스 움직임 만으로 스크롤을 움직일수 있는 스크립트입니다.
이 소스는 제로보드 관리자 모드에서 "그룹설정" 에서 "게시판 상단에 출력할 내용" 에 그대로 복사해서
넣으시면 그 효과를 보실수 있습니다.
스크립트의 경우 보드를 인클루트사용시에는 그 효과가 나타나지 않습니다.
많은 분들이 간단한 스크립트 만으로 홈페이지를 이쁘게 꾸미실수있습니다.
댓글 5
-
☺Lifestory™
2002.08.12 11:46
좋은 팁 감사합니다 ^-^ -
김지현
2002.10.19 21:24
감사드려요~ 이쁘게 쓸게요^-^ -
양은우
2003.01.06 15:45
감사합니다. 잘쓰겠습니다. -
장군:P
2004.02.12 15:19
좋은팁 감사합니다. -
뒤엉킬늪
2008.11.12 03:12
멋지네요 이쁩니다:)
제목 | 글쓴이 | 날짜 |
---|---|---|
xmp 태그를 아시나요 [9] | 세벌사랑 | 2002.07.30 |
Scrollbar Generator [스크롤바 색상을 쉽게 바꿀수 있게 코드생성] [6] | 문사라 | 2002.07.11 |
전광판? 나도 한 번 해볼까 ^^v [4] | Xynex:) | 2002.07.03 |
[사이트제작팁]팁의 보물창고~ [7] | webdio *^-^* | 2002.07.03 |
>> 밑줄과 글씨의 색을 다르게 [예제포함] [3] | 아미v | 2002.06.29 |
[Tip]로딩속도 높이는 10가지 방법. [8] | HomeBox™ | 2002.06.28 |
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능 [5] | HomeBox™ | 2002.06.27 |
제로보드 가입폼에 css쉽게 적용하기 | {동준짱} | 2002.06.26 |
로보트 검색엔진에 잘 걸리는 Meta Tag 작성법 [8] | 이성영 | 2002.06.20 |
TEXTAREA 스크롤바 뒤집기 [4] | ZipShin | 2002.06.20 |
이쁜 css 파일2 [6] | HomeBox™ | 2002.06.17 |
[re] 이쁜 css 파일2 [3] | t(T^T)t_Man. | 2005.01.07 |
이쁜 css 파일1 [1] | HomeBox™ | 2002.06.17 |
Filters and Transitions .... [4] | 점퍼워니 | 2002.06.17 |
스크롤바 색상 변경 ...! [6] | 오빠야™ | 2002.06.17 |
웹강의 할떄 소스 보이기 할떄 쓰는 특수문자!! [4] | 류™ | 2002.06.16 |
홈페이지의 대문에서 스크롤바 없애기 [10] | keymove | 2002.06.15 |
MSN.. 추가하기, 채팅하기.. (출처.. 수정) [11] | 하놈 | 2002.06.05 |
▶ 마우스 오른쪽 누르기 막힌거 뚫는법 [25] | ★쿠쿠로 | 2002.05.22 |
Input, Textarea, Radiobutton, Checkbox등 disabled 옵션. [3] | 카멜롯™ | 2002.05.20 |