CSS image sprite

CSS로 멋진 기능을 만들수 있습니다.

게임에서나 사용될 법한 스프라이트를 CSS를 사용해서 구현 할 수 있습니다.

CSS로 이미지 스프라이트를 구현해 보도록 하겠습니다.

먼저 다음의 스프라이트가 모여있는 화면을 만듭니다.

이제 각 이미지들을 마스크를 씌워서 롤오버까지 구현한 코드를 작성하면 됩니다.

각 칸의 크기는 100px 입니다.

<!DOCTYPE html>

<html>

<head>

<style>

#navi {position:relative;}

#navi li{margin:0; padding:0; list-style:none; position:absolute; top:0;}

#navi li, #navi a{height:100px; display:block;}

#btn1{left:0px; width:100px;}

#btn1{background:url('css_sprite.jpg') 0 0;}

#btn1 a:hover{background:url('css_sprite.jpg') 0 -100px;}

#btn2{left:120px; width:100px;}

#btn2{background:url('css_sprite.jpg') -100px 0;}

#btn2 a:hover{background:url('css_sprite.jpg') -100px -100px;}

#btn3{left:240px; width:100px;}

#btn3{background:url('css_sprite.jpg') -200px 0;}

#btn3 a:hover{background:url('css_sprite.jpg') -200px -100px;}

</style>

</head>

<body>

</ul>

</body>

</html>

노란박스에 롤오버 하면 다음과 같이 오버된 이미지가 올라옵니다.

정말 신기하면서도 재미있는 예제입니다.

웹마케팅 창고