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

Chcete-li ozvláštnit seznam odkazů, vhodným prvkem může být například tzv. hover efekt který známe převážně z různých typů tlačítek.

Tabulka u které je popis sloupců jednotlivých buněk viditelný i po scrollování směrem dolů. Její šířka není pevně stanovena a mění se v závislosti na velikosti viewportu.

Navigace ve formě odkazování na další stránky. Lze ji vidět predevším u internetových obchodů, katalogů a vyhledávačů, pokud se obsah nevejde na jednu stránku a je potřeba jej rozdělit na stránky další.

Tabulka uvádí nejznámější CSS hacky (někdy bývají též označovány "CSS triky") a jejich použitelnost v různých prohlížečích na různých operačních systémech.

Tabulka uvádí vykreslovací režimy prohlížečů (též módy či pracovní režimy prohlížeče) a popisuje jejich závislost na deklaraci typu dokumentu DTD.

Drobečková navigace je výborná pomůcka pro to, aby návštěvník stránky získal a udržel si představu o tom, kde se právě nachazí, a mohl se dostat jednoduše a bez přemýšlení na další důležité úrovně webu.

Efektní, avšak poněkud neefektivní oživení nadpisů pomocí stínu bez použití obrázků nebo speciálních metod pro náhradu textu Flashem a podobných technik. Založeno výhradně na transformaci textu prostřednictvím CSS.

Toto řešení ukazuje efektní vylepšení strohých textových popisných seznamů pomocí obrázků uvozujících texty. Seznam definic (definition list - DL) tak můžeme jednoduše zkrášlit pomocí tématického obrázku.

Tato verze třísloupcového layoutu si vzala to nejlepší z ostatních technik tvorby třísloupcových layoutů. Nejdůležitější přednost tohoto řešení spočívá v tom, že hlavní panel je v kódu dříve než levý a pravý panel, což ocení především příznivci SEO - obsah stránky (text stránky) je v kódu umístěn hned na začátku souboru.

Toto řešení ukazuje, jak vytvořit pomocí CSS efekt zvětšení (zoom) obrázku. Příklad využívá pouze jediný obrázek, ten však může být zvětšen až v jedenácti krocích!

Toto řešení ukazuje, jak pomocí kkaskádových stylů vytvořit efektní kulaté rohy okrajů u různých elementů. Výhodou tohoto řešení oproti jiným postupům je, že využívá jen jednoho obrázku a velmi jednoduchý XHTML kód.

Toto řešení ukazuje, jak za pomoci CSS vytvořit hover menu, kde jsou jednotlivé položky menu opatřeny komentáři, které se objevují v reakci na kurzor myši. Komentáře mohou být opatřeny i obrázky.

Toto řešení ukazuje, jak pomocí CSS vytvořit průhledné pozadí s obrázky formátu PNG. Pro dosažení průhlednosti v Microsoft Internet Exploreru, který průhledné PNG přímo nepodporuje (verze 6 a nižší), je využito vlastnosti "filter".

Toto řešení ukazuje, jak pomocí CSS umožnit vložení obrázku nebo i jiného objektu (například textu nebo videa) do prostoru mezi vizuální sloupce ve dvou a vícesloupcovém rozvržení textu.

Toto řešení ukazuje neobvyklý layout se čtyřmi sloupci. Řešení využívá vlastnost position: absolute, což nebývá typické. Jedná se o zajímavý a přitom funkční layout.

Tato galerie ukazuje kombinaci několika CSS vlastností, pomocí nichž je dosaženo pružnosti fotogalerie a zároveň stejné výšky řádků v případě, že je některá kartička ve stejném řádku vyšší než jiná.

Toto řešení ukazuje, jak s pomocí CSS vytvořit fotogalerii, ve které jsou jednotlivé obrázky umístěny ve stejně vysokých divech (kontejnerech) i s popisky. Tím je dána i výška řádků s obrázky. Kód je upraven pro správné fungování ve všech prohlížečích. Pro MSIE je použito několik samostatných úprav.

Tvorba obrázků, které reagují na velikost nadřazeného bloku. Dbejte na to aby obrázky byly vkládany v dostatečném rozlišení, aby přiměřeným zvětšením nedocházelo ke ztrátě kvality.

Toto řešení ukazuje dva způsoby, jak pomocí CSS umožnit spouštění nebo zastavování animovaného obrázku. Řešení využívá dva samostatné obrázky. První animovaný a druhý, který je vidět před spuštěním animace (tedy nejčastěji shodný s prvním v animaci).

Jedním ze způsobů využití tohoto řešení je právě prohlížení panoramat. Po drobné úpravě kódu (nahrazení id za class) můžeme prohlížeč použít jako modul a vytvořit například galerii, ve které budou vždy viditelné zhuštěné obrázky a bez kliknutí bude možno prohlédnout jejich detaily.

Další z možností, jak nahradit vlastnost clear:both, která někdy při formátování layoutu působí potíže. V tomto případě je použit trik, kde je rodičovský element nafloatován vlevo a současně má nastavenou šířku. Pak u jeho potomků stačí použít rovněž vlastnost float a nastavit šířku a vše funguje, jak má. V našem příkladu je sice použita vlastnost clear:both, ale pouze pro ukončení obtékání rodičovského elementu.

Toto řešení ukazuje, jak lze pomocí velice malého obrázku vytvořit působivé a efektivní pozadí celé stránky nebo třeba jen určité její části. Využívá se zde opakování obrázku na pozadí.

Řešení ukazuje využití HTML elementu HR, tedy vodorovné čáry. Tag HR se již příliš nepoužívá, ale sémanticky do HTML stále patří. Proto je dobré v dokumentech používat. Ukážeme si, jak čáry ostylovat, aby graficky ladily s webovou prezentací.

Toto řešení ukazuje, jak vytvořit působivé horizontální menu s písmeny orientovanými vertikálně. Jeho využití je možné u netradičních layoutů.

Pokud chcete své stránky odlišit, oživit či dodat jim prvek, který se na jiných stránkách nevyskytuje, zkuste použít obrázkové podtržení odkazů. Jak na to vám poradí toto řešení.

Toto menu se hodí spíše pro konstrukce, ve kterých je dobré k položkám menu uvést delší popis, třeba i s obrázky nebo jinými XHTML prvky.

Toto řešení ukazuje, jak s pomocí CSS snadno vytvořit tabulku s vertikálním skrolováním (posunováním obsahu). Uvedené řešení konkrétně využívá dvou vnořených tabulek. Jeho hlavní výhoda je v úspoře prostoru.

Toto řešení ukazuje, jak vytvořit horizontální obrázkové blokové menu s popisem. Menu využívá techniky image replacement a jako základu je využito nečíslovaného seznamu. Uvedeny jsou dvě rozdílné ukázky.