Aktuální kategorie: Hotová řešení

Zvýraznění odkazů při najetí kurzorem na odstavec.

Možnost připojení více stylů pro prohlížeče, které umí přepnout mezi více styly.

Neobvyklé hover menu s kartičkami.

Klasické vertikální hover menu.

Menu s podnabídkami, bez rozbalování.

Vertikální menu s 3D efektem.

Záložkové menu, ve kterém se záložky vysouvají nahoru.

Záložkové menu, ve kterém se záložky vysouvají dolů.

Horizontální hover menu (menu reagující na kurzor).

ZDnet menu.

Toto menu nevykazuje nepříjemný efekt blikání při najetí v MSIE, přestože není použit žádný preload obrázků.

Klasické hover menu (menu reagující na kurzor).

Tato finta vám ušetří mnoho času a problémů s laděním stránek pro Microsoft Internet Explorer. Problémy s nekompatibilitou zpracování kaskádových stylů vyřešíte tím, že vytvoříte dva CSS soubory - jeden základní pro všechny prohlížeče a druhý doplňkový, výhradně pro MSIE. Můžete tak snadno dosáhnout shodného zobrazení stránek ve všech prohlížečích.

Diagramy všeho možného, formátované pouze pomocí CSS.

Iniciálka v úvodu odstavce pomocí pseudotřídy first-letter.

Užitečné řešení, pokud se chcete zbavit tabulek používaných pro zarovnání formulářových prvků.

Dvousloupcový layout, ve kterém má levý panel pevnou a pravý panel plovoucí (proměnlivou) šířku.

Dvousloupcový layout, ve kterém mají oba panely plovoucí (proměnlivou) šířku.

Třísloupcový layout bez použití tabulek, absolutního pozicování nebo CSS hacků, se stejnou velikostí všech sloupců. Levý a pravý sloupec jsou široké 150px, prostřední sloupec má plovoucí šířku.

Zarovnání obrázků v galerii pomocí vlastnosti float.

Jasné a stručné - třísloupcový plovoucí layout.

Odsazení textu od okraje divu.

Simulace rámců pomocí fixního pozicování.

Ukázka definice typografických pravidel.

Ukázka obtékání obrázku.

Toto menu je vhodné pro křížovou navigaci, podobně jako klasické hover-menu. Je ale výhodnější na webu, kde jen přepínáme mezi podkategoriemi, nemusíme pořád otevírat 'roletky'. Zároveň ale toto menu reaguje na :hover, je tedy možné se z libovolného místa webu dostat kamkoli.

Toto řešení ukazuje, jak s pomocí CSS vytvořit typickou hodnotící škálu tvořenou pěti hvězdami. Řešení obsahuje jak vertikální, tak i horizontální hodnotící škálu. Hvězdy navíc mohou být snadno nahrazeny i jinými geometrickými tvary.

Toto řešení využijeme, pokud máme na stránce velké obrázky, nebo obrázky, které se při pomalém připojení zobrazují s velkým zpožděním.

Toto řešení ukazuje, jak můžeme netabulková data přinutit, aby se formátovala jako klasické tabulky. Může se například stát, že od někoho dostaneme hotový HTML dokument, který nemůžeme z nějakého důvodu měnit a přesto chceme některé části textu přinutit chování, na které jsme u tabulek zvyklí.

Menu je plně XHTML 1.0 Strict a případně i XHTML 1.1 validní, stejně jako CSS validní. Funguje v Opeře, MSIE, Firefoxu i Mozille. Menu je vystavěno bez jakéhokoli využití skriptů (JavaScript ani Behavior není použit).