티스토리 뷰

웹프로그래밍/css

CSS로 쉽게 롤오버 버튼 효과 내기

공허공자 2009. 11. 5. 18:18

롤오버 효과를 내는데는 아래 그림에서와 같이 2가지 방법이 있다.

방법1. 그림 2개를 만들어서 스위칭.
방법2. 하나의 그림 파일에 위,아래로 마우스OUT, 마우스OVER 이미지를 올려놓고 CSS로 조절.
#navigation li a#rssfeed { background: url(images/rssfeed_bg.jpg) no-repeat top left; }
#navigation li a#rssfeed:hover { background-position: bottom left; }

[출처] http://www.teddy-o-ted.com/tutorials/rollover-effects-made-easy-with-css/

'웹프로그래밍 > css' 카테고리의 다른 글

CSS 코딩 능숙하게 하기: 시작된 습득  (0) 2010.06.23
인터넷 익스플로러 6,7,8 에서 CSS3 작동하도록 하는법  (0) 2010.06.15
CSS Tab  (0) 2009.11.05
CSS 이전으로 다음으로 버튼 구현  (0) 2009.05.07
CSS 롤오버 버튼 구현  (0) 2009.05.07
공유하기 링크
댓글