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>
