Đăng nhập

Ghi nhớ
Latest topics
» Tôi sẽ đỗ đại học!
by Kiến 23/6/2017, 9:52 pm

» Xin hỗ trợ về DNS Domain cho Forumvi
by hoangthong 9/5/2017, 9:37 pm

» skin xinh forum full punbb
by kenbi05 8/5/2017, 10:47 am

» HỖ TRỢ GIÚP MÌNH VỀ VIỆC MẤT CHỨC NĂNG KIỂM TRA THÀNH VIÊN XEM BÀI TRONG GROUP FB
by hoangthong 4/5/2017, 9:14 am

» Xin chỉ giúp cách fix hình nền header cho forumvi
by Phuongtran 25/4/2017, 4:43 pm

» [Mod] Shop Gunny (New Version)
by accit 14/4/2017, 10:30 am

» Giới thiệu 3 mẫu smartphone nổi bật cho bạn quan tâm
by huydv 21/3/2017, 11:14 pm

» [Thông báo] Đổi tên miền diễn đàn[✔]
by vietkanpy 9/3/2017, 8:28 am

» Skin]Teen Pro9x [ PunBB ]
by phamtuananh9x 15/2/2017, 12:57 pm

» [Help] Nhờ mọi người " RIP " giúp mình[✔]
by sayedn73 7/2/2017, 10:31 pm

» CHÚC MỪNG NĂM MỚI
by Exterminator 7/2/2017, 12:16 pm

» Cần giúp đỡ về Ads Banner trong forum
by sayedn73 7/2/2017, 12:42 am

» Xin index box forumvi [✔]
by sayedn73 5/2/2017, 6:50 am

» LỖI ADD TRANG CHỦ
by tommy_phan 17/1/2017, 11:04 am

» Bác nào rảnh tham gia cho vui nhé
by phamthohoa 27/12/2016, 10:06 am

» Xin forum rao vặt vBulletin 4.1.11
by tonyhoaivu 18/12/2016, 12:35 am

» Cần xin skin ngamvn.com
by sayedn73 14/12/2016, 2:24 am

» Cách đổi nền Forum
by sayedn73 27/10/2016, 1:28 am

» Skin CNTT-K3 2015 (Full Mod)[✔]
by sayedn73 27/10/2016, 1:14 am

» Share skin Gameprivatevn.ace.st
by help me 23/10/2016, 4:32 pm

» Share Skin Xanh Dương Cùi Bắp
by Thànhkent 21/10/2016, 1:37 pm

» [Thắc mắc] RIP Giúp Em Topics_Blog_Box
by sayedn73 21/10/2016, 8:03 am

» Làm sao để làm Shop Pet
by aquariuss 20/10/2016, 2:21 pm

» các thím trên chinhphuc thử tìm từ khóa này xem
by bucnong1 17/10/2016, 1:35 pm

» Cách tăng lượng view ảo xem topic ?
by Tin VIP 4/10/2016, 9:34 am

Top posting users this week
nightWalker
 
Kiến
 


Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

Bài gửi by Mr.Winni on 29/5/2015, 9:56 am

Xin chào,
Hôm qua trên fb của FM có đăng mẹo để tối ưu hình ảnh tăng tốc độ tải trang, mình có nghe nói có một cách là dùng CSS Sprites để giảm số lượng link ảnh xuống.
Mình muốn hỏi khi thiết kế diễn đàn, làm sao để ứng dụng CSS Sprites trong thiết kế để giảm tối đa số lượng link ảnh sử dụng, mình có tham khảo bài viết http://www.w3schools.com/css/css_image_sprites.asp nhưng thực tình là mình khi áp dụng vào FM vẫn không biết làm thế nào.
Xin nhờ các bạn giúp đỡ.

p/s: Mình là dân không chuyên ngành tin học cũng như không được đào tạo căn bản về thiết kế website hoặc ứng dụng công nghệ thông tin. Vì vậy nếu được xin nhận hướng dẫn chi tiết.

Diễn đàn: VNFISH
Địa chỉ: vnfish.forumotion.com
Nicktest: demo
Pass: demo123

Cảm ơn đã xem bài viết Vui
avatar
Mr.Winni
CPMember
CPMember

Firefox PunBB
Ngày đăng ký : 18/04/2010
Số bài : 414
CPP : 416
Châm ngôn sống : Im lặng là vàng

Xem lý lịch thành viên http://www.vietaf.com

Về Đầu Trang Go down

Re: Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

Bài gửi by Juny Thoang on 29/5/2015, 1:22 pm

Kỹ thuật sprite là kỹ thuật nhóm các ảnh đơn lẻ vào thành một file ảnh duy nhất và hiển thị từng phần của bức ảnh sử dụng CSS. Áp dụng sprite sẽ làm giảm đáng kể RTT.
Bạn sẽ gom tất cả các ảnh nhỏ thành 1 ảnh duy nhất ( có thể dùng pixlr editor để làm bóng khoảng trắng cho ảnh trong suốt -> http://pixlr.com/editor/)

Ví dụng khi bạn thấy 1 css thế này nó chính là đang áp dụng Kỹ thuật sprite

Code:
.social_icons a {
  background: url(http://i56.servimg.com/u/f56/15/84/77/97/top_so10.png) no-repeat scroll 0 0 #7192A8;
  height: 30px;
  width: 30px;
}
.social_icons a.facebook {
  background-position: -26px 1px;
}
.social_icons a.twitter {
  background-position: 2px 1px;
}
.social_icons a.gplus {
  background-position: -55px 1px;
}

Dùng thuộc tính background-image để cài ảnh nền duy nhất - ảnh lớn chứa các ảnh nhỏ
VD: background-image: url('http://i56.servimg.com/u/f56/15/84/77/97/top_so10.png')

Dùng background-position: để căn chỉnh vị trí hình ảnh cần chọn, kiểm tra phần tử để dễ chỉnh nhé
VD: 
.social_icons a.facebook {
 background-position: -26px 1px;
}

Bạn hãy cố định kích thước hình ảnh cần chọn sao cho không bị lấn sáng các chi tiết khác (height: ...xp ; width:... xp)
VD:
height: 30px;
width: 30px;

@@ máy sắp sập nguồn rồi, mình sẻ cập nhật bài viết sau nhé
avatar
Juny Thoang
CPMember
CPMember

Chrome PhpBB3
Ngày đăng ký : 14/07/2014
Số bài : 112
CPP : 64
Châm ngôn sống : Mình sống rất OK, bấy bề

Xem lý lịch thành viên http://www.teenvi.com/

Về Đầu Trang Go down

Re: Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

Bài gửi by hóng-er on 29/5/2015, 3:50 pm

Kỹ thuật CSS sprites vô cùng khó khăn và phức tạp. Kỹ thuật này chỉ thích hợp cho các ảnh nhỏ như icon, smiley, ... Nguyên lý của nó là kết hợp nhiều ảnh nhỏ thành 1 ảnh to, sau đó dùng CSS backgroundPosition để tách 1 ảnh to thành nhiều ảnh nhỏ.

Để áp dụng kỹ thuật này cho diễn đàn, đầu tiên bạn phải xác định các ảnh nhỏ cần ghép lại và tải về máy.
Sau đó, upload lên một trong các trang web sau:
http://csssprites.com/
http://css.spritegen.com/
http://instantsprite.com/
Làm theo hướng dẫn: copy > paste > Xong!

avatar
hóng-er
CPYellowMember
CPYellowMember

Firefox Invision
Ngày đăng ký : 02/04/2010
Số bài : 3105
CPP : 1208
Châm ngôn sống : Sống để được chết một lần.

Xem lý lịch thành viên http://devs.forumvi.com

Về Đầu Trang Go down

Re: Làm sao để ứng dụng CSS Sprites trong thiết kế diễn đàn?[✔]

Bài gửi by Sponsored content


Sponsored content


Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết