Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: wordpressfront endvloghackerrankmalaysia

Front End – Quản Lý Và Tối Ưu Webpage Bằng CSS Sprites

CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên của nó.

Vậy CSS Sprites Là Gì ?

CSS Sprites hay còn có một cái tên cún cơm khác là “CSS Image Sprites”, nó là một phương thức dùng để gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và thường sử dụng thuộc tính background-position để xác định vị trí thành phần ảnh nền cần sử dụng.

Tại Sao Lại Cần Sử Dụng Sprites ?

Một trang web có thể chứa từ vài chục thậm chí vài trăm bức ảnh, trong số đó thì sẽ có chứa một số lượng lớn các bức ảnh có kích thước nhỏ như icons, logo hay social buttons … Và hãy tưởng tượng nếu các anh em có một webpage có hơn 100 icons độc lập và vô số hình ảnh đại diện cho bài viết, sau khi trình duyệt load xong mã HTML, nó sẽ gửi đi vô vàng request đến server để lấy các bức ảnh này.

Để giải quyết vấn đề trên ta chỉ cần gộp tất cả các icons thành một file ảnh duy nhất và gửi 1 request đến server khi cần.

css sprites facebook nhìn cool ngầu vãi

Cách Hiện Thực Sprites:

Ở đây mình sẽ có hai phương thức để hiện thực Sprite:

  • Cách thứ nhất: dùng photoshop gộp tất cả các icon thành một file và dùng CSS để lấy các icons bằng thuộc tính background-position.
  • Cách thức hai: mình sẽ dùng Gulp/Grunt/Node để tự động giúp mình gộp tất cả các file ảnh và sinh ra file CSS giúp mình.

Cách Đầu Tiên:

Giả sử mình có 1 file hình mà mình đã gộp tất cả icons như vầy.

cái này lấy trên mạng á :)))

Đầu tiên mình sẽ viết css load bức ảnh ở trên cho 3 icon: twitter, facebook, vimeo.

.icon-twitter, .icon-facebook, .icon-vimeo{
  background-image: url('./css-sprite.png');
  background-repeat: no-repeat;
}

Ba icon sẽ load cùng bức ảnh ở trên và chứa tất cả các icon nằm hết ở trên bức ảnh này.

Để lấy được icon theo đúng ý mình muốn lúc này mình sẽ dùng thuộc tính background-position để xác định vị trí của icon, height và width là hai thuộc tính dùng để scale đúng icon trong bức ảnh.

.icon-twitter {
height: 72px;
width: 72px;
background-position: -2px -3px;
}

.icon-facebook {
height: 72px;
width: 72px;
background-position: -78px -3px;
}

.icon-vimeo {
height: 72px;
width: 72px;
background-position: -231px -3px;
}

Và dưới đây là ví dụ cụ thể, các anh em có thể xem thêm để hiểu rõ thêm nhé

See the Pen CSS Sprites Example by Phạm Phi Hùng (@masterhungpham) on CodePen.

Cách Thứ Hai:

Update Later 😂😂😂😂

Chào các bạn, tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web. Tôi là một web developer, kiêm writer, quay phim dạo, dựng phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa.

Leave a reply:

Your email address will not be published.