Sprite 예제
학교에서 CSS를 배웠는데 background-position으로 재미있는 아이콘을 만들어보았습니다.사실 24시간전에 만든거라 뒷북치는거 같지만 그래도 칭찬받았어요 (히힛)
이 이미지는 하나의 그림입니다. (이미지는 제가 직접그린 거에요. 마음대로 가져다가 쓰시는 것을 허락합니다!)
[캡처이미지입니다] 이렇게 만들어서 마우스를 올리면 표정이 바뀌게 보았습니다.
노란색 웃는 모습을 예를 들면
<style type="text/css">
.laugh{
background-position : -201px 0;
}
a:hover.laugh{
background-position : -201px -100px;
}
</style>
를 적용 하여서 해보았습니다~.laugh{
background-position : -201px 0;
}
a:hover.laugh{
background-position : -201px -100px;
}
</style>
코드를 더 보시거나 사용하실 분은 압축파일로 저장해놓았습니다~ [다운받기](클릭)
Prev
Rss Feed