Difference between revisions of "Sprites"
From Wikicliki
Line 6: | Line 6: | ||
− | == My implementation == | + | == My sample implementation == |
'''CSS''' | '''CSS''' | ||
Line 14: | Line 14: | ||
#menu li {margin: 0; padding: 0; list-style:none;position: absolute; } | #menu li {margin: 0; padding: 0; list-style:none;position: absolute; } | ||
#menu li, #menu a { display: block;} | #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 } | + | #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} | .menutext {padding-top:12px; text-decoration:none; color:white} | ||
Line 30: | Line 31: | ||
<pre> | <pre> | ||
<ul id="menu"> | <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="item2"><a href="#2" class=menutext>BUSINESS</a></li> | ||
<li id="item3"><a href="#3" class=menutext>ABOUT US</a></li> | <li id="item3"><a href="#3" class=menutext>ABOUT US</a></li> |
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>