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.
Tại sao dùng CSS Sprite ?
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.
Nó phổ biến như thế nào (không phải ở VN ?!)?
 |
 |
- 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.gif như 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):
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.
- 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:
- Tiếp theo là mã HTML của thanh có dạng như sau:
<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>
Khi đó các bạn sẽ 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/AVvXsEgn5XMZuyOEtCQXET7GrlT0H8t-BuvYFHvZbLVFpRXv4Ky2Wi93dJcp3iOqqhA6jTZf4ALFgQzD0IqhGLwcOakBE0yJrGNnZVBxEWZSPc1F5iDq9j9UYOam6nwUEm5fmJWbZvxx5N63Ru9D/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ấ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}
- 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/AVvXsEgn5XMZuyOEtCQXET7GrlT0H8t-BuvYFHvZbLVFpRXv4Ky2Wi93dJcp3iOqqhA6jTZf4ALFgQzD0IqhGLwcOakBE0yJrGNnZVBxEWZSPc1F5iDq9j9UYOam6nwUEm5fmJWbZvxx5N63Ru9D/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>
- 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 đó.
- Nếu không bạn có thể vào đây để test đoạn mã html đó.
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.
- Bạn có thể sử dụng các hình ảnh mong muốn để tạo các hiệu ứng bạn thích.Chúc thành công!
Nhận xét
bài hay, iu bác quá :2) :1)
Trả lờiXóa@Việt Nam Không có gì mình phất hiện ra rằng nếu gộp tất cả các hình ảnh trong blog thành 1 thì tốc độ blo sẽ tăng lên đáng kể :3) :3) :3)
Trả lờiXóalâu nay mình chỉ nghĩ là ứng dụng là bản đồ menu,
Trả lờiXóanay mới biết thêm 1 tý
@Thao Trinh:3) :3) :3)
Trả lờiXóacái này chỉ áp dụng cho ảnh của menu, rồi background thôi đúng ko Nam ? chứ còn bài viết thì ko áp dụng được đúng ko ?
Trả lờiXóaBài viết cũng có thế áp dụng nếu như bạn sử dụng nhiều hình ảnh gộp thành một ảnh.
XóaVậy tức là có thể khai báo ở bài viết dạng HTML à Nam ? như thế thì có thể khai báo thẻ ID và class ở bài viết à ? Chứ còn khai báo ở "chỉnh sửa html" thì khi nào có bài viết mới có ảnh mới thì tùy chỉnh lại hết ?
Trả lờiXóaĐúng thế khai báo ở phần HTML của bài viết, vì bài mỗi bài viết có một ảnh khác nhau nếu khai báo tất trong mẫu thì sẽ làm mẫu của bạn rất nặng.
Xóap/s: Spriter thường chỉ áp dụng cho những ảnh dùng trong mẫu thôi còn trong bài viết theo mình không nên dùng vì mất thời gian để khai báo và gép ảnh mỗi khi có một bài viết mới.
Đã rõ :D
Xóa