CSS Image Sprites là gì?

CSS Image Sprites là gì?

Để 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

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.

Xem Demo 

  Download Demo

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 CSS Image Spritessử 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:

CSS Image Sprites là gì?

+  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.
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
 Máy tính bảng Nexus của Google có thể gây hiệu ứng ngược

Máy tính bảng Nexus của Google có thể gây hiệu ứng ngược

Chủ tịch Eric Schmidt của Google mới đây cho biết Google sẽ tham gia sản xuất máy tính bảng trong 6 tháng tới đây.

Microsoft bắt đầu cho đặt mua gói nâng cấp lên Windows 8

Microsoft bắt đầu cho đặt mua gói nâng cấp lên Windows 8

Người dùng có thể đặt mua gói nâng cấp giá 15 USD ngay từ thời điểm hiện tại bằng cách cung cấp mã số đăng kí cũng như thông tin sản phẩm chạy Windows 7.

[Phần 1]High performance in Drupal: Give your site a boost

[Phần 1]High performance in Drupal: Give your site a boost

Drupal is a highly flexible CMS with great community support in the form of drop in add-ons (contrib modules).

Công ty diệt chuột T&C

 

Diet con trung