CSS fígle od Plaváčka

Pár fíglů, které jsem si odnesl z Plaváčkova článku o přístupné obrázkové navigaci – nulování výchozích hodnot všech elementů, kurzor ručička ve všech prohlížečích a elegantní posouvání pozadí.

Vynulování výchozích hodnot

Pomocí hvězdičky jakožto selektoru se snadno vynulují výchozí hodnoty okraje a výplně všech blokových prvků (což je podstatné hlavně u těch, které mají tyto hodnoty v prohlížeči přednastaveny: nadpisy, odstavce, seznamy,…)

* {
  margin:0;
  padding:0
}

Ušetří vám to spoustu problémů s rozdíly mezi jednotlivými prohližeči.

Kurzor ručička v MSIE i v Mozille

Pro kurzor ve tvaru ručičky používá MSIE hodtnotu hand zatímco ostatní podporují pointer, takže zápis v CSS by měl vypadat následovně (aby ručička fungovala opravdu všude):

span {
 cursor: pointer;
 cursor: hand;
}

Posouvání obrázku na pozadí

O rolloverech založených na posouvání pozadí psal už i pixy ve svém článku, ale Plaváček použil pro nastavení polohy pozadí místo pixelů klíčová slova left, center a right, což je podstatně více elegantní a hlavně rozměrově nezávislé.

#home span {
 background:  url("home.gif") no-repeat center top;
}

#home a:hover span {
 background:  url("home.gif") no-repeat left top;
}

Přístupná obrázková navigace

A konečně také celý článek stojí za přečtení – je o vytváření grafické navigace s rollover efektem, která je:

  • bez javascriptu
  • použitelná i bez stylů
  • použitelná i bez obrázků
  • jednoduchá a elegantní

navíc byl článek později i zaktualizován a tak se vyřešil problém s blikáním obrázků v prohlížeči MSIE 6.

Odkazy:

Související články

Komentáře

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce