Sử dụng CSS Image Sprites

Để hiểu CSS Image Sprites là gì? chúng ta cùng xem xét cách thiết kế Navigation như hình bên dưới, nếu theo cách thông thường bạn phải cần ít nhất ít nhất 8 hình ảnh để làm ảnh nền (Nếu tính cả 4 ảnh cho hiệu ứng Rollover).

CSS Image Sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và sử dụng thuộc tính background-position trong CSS với 2 vị trí Left, Top để  xác định vị trí thành phần ảnh cần làm nền, nhằm giảm tải Request (yêu cầu) đến Server, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài nguyên hệ thống.

Cách sử dụng CSS Image Sprites

Bây giờ chúng ta sẽ cùng thiết kế Navigation như trên bằng cách sử dụng CSS Image Sprites.

Trước tiên bạn phải sử dụng một chương trình đồ họa như Photoshop…, và gộp các file ảnh cần sử dụng lại thành một file duy nhất. Mình gộp 8 file hình cần sử dụng tại ví dụ trên thành một file duy nhất với tên icon.gif như sau:

 

Bạn nên sắp xếp cho thuận lợi trong việc tính toán vị trí của các ảnh.

Tôi sắp xếp các  ảnh liền kề nhau từ trái sang phải, phần đối xứng bên dưới là các hình ảnh sử dụng cho hiệu ứng Rollover.

Tiếp theo là mã HTML

<div id="wrapper">

<ul id="icon">

     <li class="user"><a href="#">User</a></li>

     <li class="rss"><a href="#">Rss</a></li>

     <li class="comment"><a href="#">Comment</a></li>

     <li class="global"><a href="#">Global</a></li>

</ul>

</div>

Mã CSS

* {margin: 0; padding: 0}

#wrapper{margin: 30px auto; width: 500px}

#icon li{float: left; margin-right: 50px; list-style: none}

#icon li a{height: 85px; display: block; background: url(imgs/icon.gif); text-indent: -999999px}

Ở đoạn mã CSS trên chúng ta sử dụng file hình icon.gif  duy nhất làm nền cho các thành phần liên kết (#icon li a)

Tiếp theo  chúng ta sẽ Sử dụng thuộc tính background-position để xác định vị trí thành phần ảnh cho các thành phần trong Navigation.

Từ  Photoshop bạn có thể xác định được kích thước các thành phần ảnh như sau:

+  Thành phần icon user (#icon li.user a) sử dụng phần trên cùng bên trái của file ảnh icon.gif, nên có vị trí : left: 0px, top: 0px và có độ rộng 54px.

#icon li.user a{width: 54px; background-position: 0 0}

+ Thành phần icon rss(#icon li.rss a)

Thành phẩn ảnh chứa icon RSS có vị trí cách bên trái 54px (Bằng độ lớn của thành phần (#icon li.user a), do đó chúng ta phải di chuyển thành phần ảnh này sang trái -54px để trở về đúng vị trí 0 0, và có độ rộng 51px.

#icon li.rss a{width: 51px; background-position: -54px 0}

Tương tự thành phần icon Comment chúng ta phải dịch chuyển về bên trái 54px (độ lớn icon User) + 51px (Độ lớn icon RSS) = 105px

#icon li.comment a{width: 61px; background-position: -105px 0}

Và icon Global dịch chuyển 105 + 61 = 166px

#icon li.global a{width: 54px; background-position: -166px 0}

Các thành phần ảnh tạo hiệu ứng Rollover có vị trị left giống như trên, chỉ thay đổi vị trí top được dịch chuyển xuống phía dưới 85px (Bằng chiều cao của các Icon), nên ta có mã CSS như sau:

#icon li.user a:hover{background-position: 0 85px}

#icon li.rss a:hover{background-position: -54px 85px}

#icon li.comment a:hover{background-position: -105px 85px}

#icon li.global a:hover{background-position: -166px 85px}

KẾT LUẬN

• Vị trị left của thành phần ảnh chính là giá trị âm độ lớn khoảng cách của nó so với bên trái. Ví dụ Icon Comment cách bên trái 105px nên vị trí left của nó là: -105px.
• Vị trí top chính là khoảng cách độ lớnkhoảng cách giữa nó so với bên trên.
• Bài viết sau tôi sẽ hướng dẫn bạn sử dụng công cụ để tạo ra CSS Image Sprite một cách nhanh và hiệu quả hơn.