Štítek: Pro CSS: triky a finty
Alternativa ke clear:both
Toto řešení přináší alternativu pro clear:both. Konkrétní příklad ukazuje, jak ukončit text okolo plovoucího (float) objektu. Clear:both totiž v tomto případě vytváří nadbytečnou mezeru.
Hover nápověda
Toto řešení najde využití například v textech obsahujících hodně zkratek či odborných termínů. Nápověda se zobrazí okamžitě při najetí myší a uživatel tak není obtěžován načítáním jiné stránky.
Nahrazení tečkovaného okraje při onfocus
Toto řešení ukazuje, jak opravit chybu objevující se ve Firefoxu při použití často využívané techniky Phark Image Replacement. Po kliknutí se u aktivního active/on-focus objektu objeví ve Firefoxu nehezký tečkovaný
Tečkovaný rámeček i pro IE
Toto řešení ukazuje, jak obejít chybu v Internet exploreru, který při malých tloušťkách zobrazuje tečkovaný okraj chybně jako čárkovaný.
Obsah dokumentu
Toto řešení ukazuje, jak vytvořit jednoduchý obsah dokumentu. Jako základu využívá tabulky a dolní podtržení jako vodící linku. Řešení je dále možno použít i jako jídelní lístek.
Náhled obrázku
Toto řešení ukazuje, jak jednoduše a zajímavě vytvořit efektivní náhledy obrázků pomocí CSS. Řešení využívá jednoduchého skrývání části obrázku. Jedinou nevýhodou tohoto řešení je složitější příprava vlastního obrázku.
Banner jako pozadí
Toto řešení ukazuje, jak využít obrázku na pozadí jako banneru. Jeho výhodou pro běžně návštěvníky je dobré rozvržení stahování banneru, kdy je animovaná část stahována až při najetí myší na
SEO obrázky
Pomocí tohoto řešení dosáhneme toho efektu, že se obrázek zobrazí klasicky a kvůli SEO pod něj vložíme jeho ekvivalent v textové podobě. Toto řešení zajistí, že je text viditelný i tehdy,
Stínování objektů
Toto řešení umožní snadno zpříjemnit design stránek. Hodí se jak pro formátování obrázků, tak i libovolných jiných řádkových nebo blokových elementů.
Scrollbar vlevo
Tento příklad ukazuje jak jednoduše vytvořit scrollovací lištu vlevo od scrollováného objektu například textového pole. Lze například použít pro originální „převráceny“ design.
CSS font
Jedná se o příklad, který ukazuje font generovaný pouze pomocí CSS. Jeho možnosti reálného nasazení jsou sice omezené, ale dobře ukazuje možnosti CSS. Využití je možné například k ochraně e-mailové schránky
CSS grafy
Tyto grafy jsou tvořeny pouze prostředky CSS, tedy s využitím tohoto řešení odpadá dynamické generování grafů jako PHP obrázků. Při potřebě dynamického grafu si vystačíme s vygenerováním několika čísel.
Hover popis fotky pro IE5+
Popis důležitých bodů obrázku pomocí CSS a vlastnosti hover.
Skrytí e-mailu před harvestery e-mailových adres (antispam)
Užitečná pomůcka, kterou lze ochránit e-mailovou adresu proti automatickým robotům hledajícím na internetu adresy pro spamování.
Simulace animace v CSS
Pseudoanimace při přejíždění kurzorem po speciálním elementu.