Štítek: Pro CSS: formátování
Hover efekt pro seznam odkazů
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 s posuvníkem a pružnou šířkou
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.
Obrázkové popisné seznamy
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.
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.
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
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
Kalendář v CSS
Toto řešení ukazuje, jak lze pomocí kaskádových stylů vytvořit vizuálně působivý kalendář. V příkladu jsou uvedeny dva kalendáře – jeden kalendář je vytvořen pomocí tabulek a druhý bez jejich použití.
Inline tlačítka
Toto řešení ukazuje, jak vytvořit čistě textová tlačítka. Tato tlačítka jsou formátována jako inline prvky uvnitř textu. Mohou tedy být formátována jako plovoucí, zarovnávána nebo vkládána do seznamů.
Styly formulářů
Toto řešení předvádí, jak pomocí CSS upravit vzhled formulářů. Ve třech ukázkách jsou demonstrovány formuláře s různými položkami a možnostmi jejich stylování.
Rámování tabulek
Toto řešení ukazuje, jak můžeme formátovat tabulky, především jejich okraje, abychom dosáhli co nejlepšího vizuálního efektu. Různé styly rámečků kolem tabulek a jednotlivých buněk usnadňují vnímání jejich obsahu a zvyšují
Formátování tabulek
Toto řešení ukazuje běžné i méně obvyklé způsoby formátování tabulek. Zajímavá je například možnost formátovat sloupce tabulky.
Hrátky s okrajem textu
Někdy se může hodit poněkud netypické formátování plovoucích objektů v textu. Denně takové formátování můžeme vidět například v tištěných novinách. Toto řešení ukazuje, jak podobného efektu dosáhnout na webových stránkách pomocí CSS.
Obrázek na pozadí odstavce
Toto řešení ukazuje, jak zlepšit vzhled odstavců na Vašich stránkách. Ukazuje jak vytvořit zvýraznění prvního slova v odstavci obrázkem na pozadí nebo možnost jak například vylepšit citace. Jedná se o jednoduché