Sử dụng CSS Sprite để tối ưu hóa Website, blog

CSS Sprite là gì ?

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.

Google

- Tiếp theo là mã HTML của thanh có dạng như sau:

 <div id ="wrapper">
<u ="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>

Khi đó có Css sử dụng một hình duy nhất 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8vSLZLxCOhbtxE6Hfs6K_6bfADgBkLNRwmBNQTZjvePoD8Wd-TVagg0ck1-O7f4y9aQqsHZ8NSnYz_u6JBtKDMYRnhFetuTOHkz25tgbyrZDQT4gyOT0RHi-5cljmjc9Tgwpzr1qvqKz/s1600/icon-spriter-namkna-ngoctra.gif); text-indent: -999999px}

- Ở đoạn mã CSS trên 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)

+ 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}

- Sau khi tổng hợp lại bạn sẽ được một code hoàn chỉnh như sau:

<style> /* phần khai báo chung để sử dụng link ảnh duy nhất */ * {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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8vSLZLxCOhbtxE6Hfs6K_6bfADgBkLNRwmBNQTZjvePoD8Wd-TVagg0ck1-O7f4y9aQqsHZ8NSnYz_u6JBtKDMYRnhFetuTOHkz25tgbyrZDQT4gyOT0RHi-5cljmjc9Tgwpzr1qvqKz/s1600/icon-spriter-namkna-ngoctra.gif); text-indent: -999999px}
         /* Phần tạo ảnh nền tại các vị trí mong muốn */
         #icon li.user a{width: 54px; background-position: 0 0}
         #icon li.rss a{width: 51px; background-position: -54px 0}
        #icon li.comment a{width: 61px; background-position: -105px 0}
         #icon li.global a{width: 54px; background-position: -166px 0}
         /* phần tạo hiệu ứng rollover khi rê chuột vào các hình ảnh */
         #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} </style>
         /* Phần định dạng vị trí CSS */
         <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>

Tóm lại.
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ớ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.

Nguồn :namkan