Pokročilý hover efekt

Pro vytváření hover efektu odkazu (najetí myši nad odkaz) se velmi osvědčil trik s obrázkem na pozadí, který je složen z obrázků obou stavů. Tedy z normálního a hoveru. Při najetí myši pak pouze posuneme o určitou vzdálenost pozadím a je hotovo.

Velkou výhodou je, že se nemusí při najetí načítat další obrázek, takže je změna krásně plynulá a nebliká.

#smrk{
  background: url("../img/col2.jpg") left bottom no-repeat;
}

#smrk:hover{
  background-position: -135px bottom;
}

Pokud tuto techniku zkombinujeme s dalšími html a css "vychytávkami" vznikají opravdu zajímavé kontrukce.

Jako příklad se můžete podívat na web Mercurius, který jsem nedávno kódoval.

Doporučuju se na stránku podívat i bez stylů a prozkoumat zdroják. Celá konstrukce odkazů na druhy dřeva je totiž celkem elegantní.

Začátečníkům bych doporučoval zdroják prozkoumat ještě detailněji. Naleznete tam totiž vzorová řešení, jak by se mělo kódovat logo (jde to samozřejmě i jinak) a navigace. U loga si všimněte, že správně funguje i v případě, kdy si uživatel vypne styly nebo když si vypne obrázky(a zapne styly). více o kódování loga

Hodnocení

Komentáře

[1] m@nik
2007-06-03 10:09:18

no nevim, ale kdyz Mercurius vypnu obrazky (pres Web Developer), tak se mi nic alternativniho k nadpisu nezobrazi. U vypnuti CSS je to samozrejme v poradku...

[2] Dundee
2007-06-03 15:14:42

Seš si tím jistej? V jakém prohlížeči to zkoušíš? Mě to v Opeře dělá přesně to co má, tedy zobrazí se text "Mercurius"...

[3] sekyt
2007-06-03 15:48:42

Po vypnutí obrázků (nebo stylu) se mi logo v Opeře 9.21 (linux) zobrazuje. To je ok.
<p>
Ale pokud mám vypnuté jenom obrázky, nevidím navigaci (domů, sklad, reference, kontakty), jen nabídku dřeva :-(.</p>

Na tento komentář odpověděl [5] Dundee
[4] tomm
2007-06-03 16:30:31

Ten web ma jeste jeden problem. Zkousel jste poradne zvetsit pismo? Jako lide, kteri maji problem se zrakem. Na druhou stranu, webu, ktere tohle maji poresene, je jako safranu. Nejvetsi problem je v obrazcich ... uz aby byla podpora vektorove grafiky v prohlizecich :-(

Na tento komentář odpověděl [5] Dundee
[5] Dundee
2007-06-03 16:37:36

#3 sekyt: To je zajímavé...Moc nechápu proč se to stalo...

#4 tomm: Kdo si chce často zvětšovat obsah webů, stáhne si Operu...Je to sice drastické řešení, ale asi jediný možný schůdný kompromis.

Na tento komentář odpověděl [7] tomm
[6] g
2007-06-03 18:37:46

[imp][/imp][b][/b][i][/i][p][/p]

[7] tomm
2007-06-23 18:29:31

#5 Dundee: A to po obycejnem uzivateli chcete neco jako stahovani a nedej boze instalaci jineho prohlizece? Vetsinou ani nevi, co to ten prohlizec je ... budme realisti, tohle proste musi odmakat tvurce stranky - pokud ma tedy dost znalosti a vule se s tim poprat.

Na tento komentář odpověděl [8] longin
[8] longin
2007-07-20 08:07:53

#7 tomm: ne, to si musi zakaznik zaplatit aby se s tim programator sral ...

Komentáře již nelze přidávat