Články autora Redakce Interval.cz
Vertikální menu s komentáři
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.
Průhledné pozadí ve všech prohlížečích
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
Objekt mezi odstavci
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.
Čtyřsloupcový layout s position: absolute;
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.
Fotogalerie se stejnou výškou řádku
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á.
Fotogalerie se zmenšenými obrázky a popisky
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
Obrázky reagující na velikost viewportu
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.
Spouštění animovaných obrázků
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
Prohlížeč panoramatických obrázků
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
Alternativa ke clear:both 2
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
Pozadí s opakováním
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í.
HR – vodorovná čára
Ř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
Horizontální menu s vertikálním písmem
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ů.
Obrázkové podtržení odkazu
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í.
Horizontální menu s náhledem stránky
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.