Difference between revisions of "Sprites"
From Wikicliki
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | CSS SPRITES | + | CSS SPRITES ARE AWESUM |
− | + | *http://www.alistapart.com/articles/sprites | |
+ | *[http://www.websiteoptimization.com/speed/tweak/css-sprites/ CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance] | ||
− | + | ||
+ | |||
+ | == My sample implementation == | ||
+ | |||
+ | '''CSS''' | ||
+ | |||
+ | <pre> | ||
+ | #menu {padding:0;position: relative ; background:url("images/menu_ribbonsprite.gif"); } | ||
+ | #menu li {margin: 0; padding: 0; list-style:none;position: absolute; } | ||
+ | #menu li, #menu a { display: block;} | ||
+ | #item1, #item2, #item3, #item4 {background:url("images/menu_ribbonsprite.gif") 0 0 no-repeat; | ||
+ | height:37px; width:183px; text-align:center; font-family:frutiger, arial; font-size:13px; color:white } | ||
+ | .menutext {padding-top:12px; text-decoration:none; color:white} | ||
+ | |||
+ | #item1 a:hover, #item2 a:hover, #item3 a:hover, #item4 a:hover {height:37px;background:url("images/menu_ribbonsprite.gif") 0 -37px no-repeat;} | ||
+ | |||
+ | #item1 {left: 0; width: 187px;} | ||
+ | #item2 {top:40; width: 187px;} | ||
+ | #item3 {top:80; width: 187px;} | ||
+ | #item4 {top:120; width: 187px;} | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | '''HTML''' | ||
+ | |||
+ | <pre> | ||
+ | <ul id="menu"> | ||
+ | <li id="item1"><a href="#1" class=menutext>PERSONAL</a></li> | ||
+ | <li id="item2"><a href="#2" class=menutext>BUSINESS</a></li> | ||
+ | <li id="item3"><a href="#3" class=menutext>ABOUT US</a></li> | ||
+ | <li id="item4"><a href="#4" class=menutext>MEDIA CENTRE</a></li> | ||
+ | </ul> | ||
+ | </pre> |
Latest revision as of 07:06, 18 May 2009
CSS SPRITES ARE AWESUM
- http://www.alistapart.com/articles/sprites
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
My sample implementation
CSS
#menu {padding:0;position: relative ; background:url("images/menu_ribbonsprite.gif"); } #menu li {margin: 0; padding: 0; list-style:none;position: absolute; } #menu li, #menu a { display: block;} #item1, #item2, #item3, #item4 {background:url("images/menu_ribbonsprite.gif") 0 0 no-repeat; height:37px; width:183px; text-align:center; font-family:frutiger, arial; font-size:13px; color:white } .menutext {padding-top:12px; text-decoration:none; color:white} #item1 a:hover, #item2 a:hover, #item3 a:hover, #item4 a:hover {height:37px;background:url("images/menu_ribbonsprite.gif") 0 -37px no-repeat;} #item1 {left: 0; width: 187px;} #item2 {top:40; width: 187px;} #item3 {top:80; width: 187px;} #item4 {top:120; width: 187px;}
HTML
<ul id="menu"> <li id="item1"><a href="#1" class=menutext>PERSONAL</a></li> <li id="item2"><a href="#2" class=menutext>BUSINESS</a></li> <li id="item3"><a href="#3" class=menutext>ABOUT US</a></li> <li id="item4"><a href="#4" class=menutext>MEDIA CENTRE</a></li> </ul>