Hướng dẫn từng bước sử dụng css sprite

15/07/2012

css-sprites

Css Sprites là một kỹ thuật mà các bạn thiết kế và phát triển web đều nên biết, hôm nay mình sẽ hướng dẫn các bạn cách làm CSS Sprites từng bước một :

Trong baì này mình sẽ giúp các bạn tạo 1 button sử dụng kỹ thuật css sprite này.các bạn có thể save hình sau về để test thử :

buttonsSprite

Bước 1 : Tạo File hình cho Css Sprites:

Để tạo 1 file hình dùng chung cho nhiều phần tử thì chìa khóa là bạn phải tính toán sao cho vừa khớp cả bề ngang lẫn chiều dọc phần tử mà bạn muốn tạo, để dễ hiểu các bạn có thể tham khảo hình sau :

Hướng dẫn từng bước tạo css sprites

Bước 2 : Tạo file css
Bạn đã tạo được file hình trong bước 1, giờ đây là lúc bắt nó hoạt động theo ý muốn , các bạn hãy copy đoạn code sau :

a.download:link, a.download:visited {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 0 no-repeat
}
a.download:hover, a.download:active {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 -64px no-repeat
}
a.demo:link, a.demo:visited {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px 0 no-repeat
}
.demo:hover, a.demo:active {
display:block;
width:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px -64px no-repeat
}

Bây giờ việc bạn cần làm là đặt đoạn code sau vào vị trí mà bạn muốn hiển thị các nút bấm (button)

<a href="#" class="demo">Demo</a>
<a href="#" class="download">Download</a>

Để hiểu rõ hơn về kỹ thuật này thì các bạn có thể tham khảo hình bên dưới từng bước hoạt động của nó

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Rất đơn giản phải không các bạn, nếu bạn nào chưa hiểu rõ hoặc còn vướng mắc ở đâu thì có thể để lại lời nhắn sau bài viết này, mình sẽ giúp các bạn chỉnh sửa.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Trang

    cho mình hỏi, ở 2 cái nút demo, vị trí xét toạ độ sao không là x: 202px, mà lại là -202px? mình thấy nó đi về bên tay phải mà?

    • Cái -202px đó dùng để điều chỉnh độ cao chứ không phải điều chỉnh vị trí trái phải, ở đây thì nó sẽ chạy lên cao so với vị trí 0px

  • IT4RVN.TK

    cho mình hỏi có cách nào xác định tọa độ không?