Difference between revisions of "Sprites"
From Wikicliki
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
CSS SPRITES ARE AWESUM | CSS SPRITES ARE AWESUM | ||
| − | http://www.alistapart.com/articles/sprites | + | *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 implementation == | + | |
| + | == My sample implementation == | ||
'''CSS''' | '''CSS''' | ||
| Line 12: | 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 28: | 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>
