Štítek: Pro CSS: triky a finty

Stránkování

2. července 2007

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

Stínování textu

12. dubna 2007

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.

Zoom obrázku

7. prosince 2006

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!

Kulaté rohy

8. října 2006

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ý

Průhledné pozadí ve všech prohlížečích

29. srpna 2006

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

Obrázky reagující na velikost viewportu

18. července 2006

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ů

8. července 2006

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ů

30. června 2006

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

27. června 2006

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

27. června 2006

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í.

Obrázkové podtržení odkazu

1. června 2006

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í.

Tabulka se skrolováním

16. května 2006

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.

Odkaz Více

2. května 2006

Toto řešení ukazuje, jak pomocí CSS vytvořit populární odkaz „více“ nebo „více zde“, který po kliknutí zobrazí pokračování započatého textu ve zvětšeném objektu. Při opětovném kliknutí jinam zase tento text

Prevence zalamování řádku

24. dubna 2006

Toto řešení ukazuje, jak lze snadno obejít problém MSIE s interpretací mezer v menu a podobných konstrukcích. Celý trik je přitom založen na využití CSS vlastnosti „white-space: nowrap“, která brání zalamování řádků.

Kulatý roh stránky

19. dubna 2006

Pomocí tohoto řešení můžeme zarovnat text podle různě zakřiveného – například kulatého – okraje.

  1. 1
  2. 2
  3. 3