Tạo menu CSS bằng kỹ thuật CSS Sprites
Bài viết này Y2Graphic sẽ hướng dẫn các bạn làm một menu chuyên nghiệp bằng cách sử dụng CSS Sprites. Mời các bạn theo dõi.


.
.
CSS Sprite là gì ?

Kỹ thuật “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 . 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.

Cấu trúc HTML

Code:


 <div class="navi1">
<ul>
  <li class="sm1"><a href="#"></a></li>
  <li class="sm2"><a href="#"></a></li>
  <li class="sm3"><a href="#"></a></li>
  <li class="sm4"><a href="#"></a></li>
  <li class="sm5"><a href="#"></a></li>
</ul>
</div>

Hãy download file ảnh này về, trước khi code CSS
Downlaod

Code:

   
.navi1 {
  display:block;
  height:72px;
  margin:0 auto;
  position:relative;
  width:525px;} 

.navi1 ul {
  float:none;
  list-style-image:none;
  list-style-type:none;
  margin:3px 0;}

.navi1 ul li {
  background-image: url('/tab-1.png');
  background-repeat:no-repeat;
  float:left;
  height:72px;
  margin:0px;
  padding-top:5px;
  position:absolute;}

.navi1 ul li a {
  display:block;
  height:100%;   
  width:100%;}

.navi1 ul li.sm1 {
  background-position:0 0;
  left:0px; 
  width:125px;}

.navi1 ul li.sm2 {
  background-position:-125px 0;
  left:100px;
  width:124px;}

.navi1 ul li.sm3 {
  background-position:-249px 0;
  left:200px;
  width:124px;}

.navi1 ul li.sm4 {
  background-position:-373px 0;
  left:300px; 
  width:125px;}

.navi1 ul li.sm5 {
  background-position:-498px 0; 
  left:400px;   
  width:126px;}

.navi1 ul li:hover {
  z-index:1000;}

.navi1 ul li.sm1:hover {
  background-position:0 -75px;}

.navi1 ul li.sm2:hover {
  background-position:-125px -75px;}

.navi1 ul li.sm3:hover {
  background-position:-249px -75px;}

.navi1 ul li.sm4:hover {
  background-position:-373px -75px;}

.navi1 ul li.sm5:hover {
  background-position:-498px -75px;}