How to use CSS Sprites ?

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,888
Points
0
anyone know how to use CSS Sprites to make different backgrounds in a image file ?
Thanks
 

webdesign

New member
Joined
Jul 5, 2012
Messages
234
Points
0
For example you have a button with two status are normal and hover states, each state has a corresponding background. Normally you will save two files normal.gif (16x16px) and hover.gif (16x16px).
Now create a file using PS picture.gif (32x16px) then copy paste to 2 other images, the image on the left to normal, the right to hover image, like puzzle games so that.
Set CSS with code
a{
background: #FFFFFF url("picture.gif") left no-repeat;
}
a:hover{
background: #FFFFFF url("picture.gif") -16px no-repeat;
}
just simple way to make css sprites :)
 

madelinekim

New member
Joined
Aug 8, 2012
Messages
34
Points
0
When you use CSS spirits you have to keep some points in mind such as CSS files are little bit heavier, Give attention when you are using repeat. For using the CSS spirits you have to put multiple files together in one file.
 

hoangvu

New member
Joined
Jun 6, 2012
Messages
1,888
Points
0
Thanks for all info, I've never used css sprites but now I can know abit about it
 
Older threads
Replies
1
Views
2,838
Replies
2
Views
2,430
Replies
12
Views
5,902
Replies
20
Views
8,478
Replies
2
Views
4,278
Newer threads
Replies
2
Views
2,848
Replies
31
Views
29,774
Replies
9
Views
5,154
Replies
2
Views
3,537
wms
Latest threads
Replies
2
Views
11
Replies
0
Views
17
Replies
2
Views
43
Replies
1
Views
84
Recommended threads
Replies
5
Views
4,900
Replies
13
Views
7,763
Replies
22
Views
9,778
Replies
3
Views
840

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top