Články autora Redakce Interval.cz
Kulaté rohy
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.
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 „filter“.
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 upraven pro správné fungování ve všech prohlížečích. Pro MSIE 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 nejčastěji shodný s prvním v animaci).
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 vždy viditelné zhuštěné obrázky a bez kliknutí bude možno prohlédnout
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 u jeho potomků stačí použít rovněž vlastnost float a nastavit
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 ostylovat, aby graficky ladily s webovou prezentací.
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í.