#menu li{
    background: #491312 url('images/menu.png');
}
 
#menu li:hover{
    background: #820403 url('images/menu.png');
    background-position:0px 35px;
}
 
#menu li.active{
    background: #261f1f url('images/menu.png');
    background-position:200px 0px;
}
 
#menu li.active:hover{
    background: #000 url('images/menu.png');
    background-position:200px 35px;
}

Komentarzy: 9 »

1. 

   Skoro już mowa o opty­ma­li­za­cji to zamiast napisać:

   back­gro­und: #000 url(‚images/menu.png’);
   background-position:200px 35px;

   można skró­cić do:

   back­gro­und: #000 url(‚images/menu.png’) 200px 35px;

   Pozdra­wiam

   Komentarz by kilas — 18 maja 2010, 20:34

2. 

   Dzię­kuję za wer­sję zop­ty­ma­li­zo­waną. Moim celem było uka­za­nie background-position ponie­waż chyba nie­wielu o nim w ogóle słyszało.

   Pozdra­wiam

   Komentarz by Michał Środek — 18 maja 2010, 20:51

3. 

   W ogóle dużo osób nie wie, że w tle można usta­wić coś po za gra­fiką lub kolo­rem
   I tak przy oka­zji jak piszesz 0px, 0em nie musi poda­wać jed­nostki wystar­czy np. background-position: 0 35px;

   Komentarz by Maciej Wiczołek — 18 maja 2010, 21:47

4. 

   bar­dzo fajny arty­kul. troszke sie o sprite’ach dowie­dzia­lem i fajna sprawa. bede musial wyprobowac.

   Komentarz by tomek tomkowy — 23 maja 2010, 14:12

5. 

   Od zawsze iry­to­wało mnie cze­ka­nie na zała­do­wa­nie się :hovera

   Komentarz by Oskar Wójcicki — 27 maja 2010, 22:17

6. 

   CSS spri­tes to nie tylko roz­pra­wie­nie się z :hover (co czę­sto jest męczące jak menu jest obraz­kowe i znika po naje­cha­niu kur­so­rem), ale także reduk­cja żądań http, ogra­ni­cze­nie wiel­ko­ści gra­fik, szyb­sze łado­wa­nie się strony i kilka innych

   Komentarz by Vokiel — 6 lipca 2010, 13:44

7. 

   @Vokiel: przed­ostatni aka­pit arty­kułu . :hover jest tutaj zapre­zen­to­wany jako przy­kład prak­tycz­nego uży­cia gdzie gołym okiem(dosłownie) widać róż­nicę w dzia­ła­niu strony.

   Komentarz by Michał Środek — 6 lipca 2010, 15:01

8. 

   Bar­dzo fajny arty­kuł, prze­czy­ta­łem go u Cie­bie już kie­dyś i od tam­tego czasu korzy­stam ze sprite-ów jak najczęściej.

   Teraz przy­pad­kowo wpa­dłem na ten arty­kuł po raz ponow­nie, to napi­sał komen­tarz

   Komentarz by haz — 4 sierpnia 2010, 19:06

9. 

   Fajny arty­kuł, dotych­czas nie wie­dzia­łem o moż­li­wo­ści usta­wie­nia tła poza ele­ment, albo wie­dzia­łem, jed­nak nie myśla­łem, aby tak to wyko­rzy­stać

   Komentarz by godlark — 21 sierpnia 2010, 15:53

Kanał RSS z komentarzami do tego wpisu. TrackBack URL

Copyright © Michał Środek