CSS Sprites do Dave Shea đề nghị lần đầu năm 2004. Thuật ngữ “Sprites” thực ra là kỹ thuật đã được dùng từ trước trong các video games và sau này là trong các website. Tất cả các hình ảnh được đặt vào 1 file hình duy nhất, sau đó dùng thuộc tính background-position của CSS để hiện ra đúng vị trí cần thiết. Cách này cũng được áp dụng với các hiệu ứng hover, active hay focus để tạo các nút bấm động một cách mượt mà hơn.
Đang xem: Css sprite là kỹ thuật gì
Với kỹ thuật này thì chỉ có 1 file hình lớn duy nhất được load thay vì hàng loạt hình nhỏ được load lần lượt. Nhiều người cho rằng, load những hình nhỏ thì nhanh hơn load 1 hình lớn. Điều này không chính xác. Mỗi hình khi load sẽ tạo 1 HTTP-Request, mỗi request như vậy sẽ phải “open” và “close” 1 socket mới, càng nhiều hình thì càng nhiều request, và điều này ảnh hưởng lớn tới tốc độ của website (Yahoo! User Interface Blog). Ngoài ra dễ thấy hơn là khi đặt tất cả hình ảnh vào trong 1 file thì kích thước file giảm đi đáng kể.
Lợi thế của việc dùng duy nhất 1 hình lớn mang lại ngoài việc tăng tốc độ thực thi của website còn giảm chi phí cho bandwith.
 |
 |
– Trên đây mình chỉ lấy ví dụ ở 2 trang nổi tiếng nhất hiện nay là Google và facebook ngoài ra còn rất nhiều trang khác nữa. Vừa rồi Namkna đã thử nghiệm với một phần tử trên blog của namkna. bạn hãy để ý sang phần các Icom tivi bên tay phải. Nếu chỉ thoạt nhìn bạn sẽ tưởng đó là 18 Icom truyền hình gộp lại nhưng hoàn toàn không phải. mình đã sử dụng một link ảnh duy nhất là:
OK, nguyên tắc hoạt động như thế nào ?
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.gifnhư sau (Do máy tính mình không cài photosop nên mình tạm lấy hình này ở trên mạng để các bạn tham khảo):
– Namkna 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 của thanh có dạng như sau:
* {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(http://2.bp.blogspot.com/-HPilewzPwY8/T2XYj9DrwoI/AAAAAAAAEGk/4u7UOtmSexY/s1600/icon-spriter-namkna-ngoctra.gif); text-indent: -999999px}
– Ở đoạn mã CSS trên chúng ta sử dụng file hình icon.gif duy nhấtlàm nền cho cácthành phần liên kết (#icon li a)
Tiếp theochú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.
+ 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.
Xem thêm: Trò Chơi Cá Voi Xanh Là Gì, Thử Thách Momo, Cá Voi Xanh: Dạy Trẻ Cách Tự Sát
#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 iconUser) + 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} – Sau khi tổng hợp lại bạn sẽ được một code hoàn chỉnh như sau:
– Bạn hãy tạo một tiện ích html và pate đoạn code đó vào để kiểm tra nha.– Nếu không bạn có thể vào đây để test đoạn mã html đó.
Vị trị left của thành phầnảnh chính là giá trịâm độ lớnkhoả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ớn khoảng cách giữa nó so với bên trên. trong ví dụ này top là 85.
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.