Pozadí bloku jako element stránky Při pokročilém formátování webu nebo snaze o flexibilitu se může hodit tento trik, který využívá nové specifikace datového typu obrázku CSS3. Jde o pokročilou funkci a je zatím oficiálně podporována jen ve Firefoxu.   Kód: <div style=“background-color: green; width: 300px; height: 100px“ id=“blok“>Blok s nastavenou barvou pozadí zelenou</div> <div style=“background-color:…

HTML5 opačný text Pokud děláte nějaké cizojazyčné stránky, jistě se bude hodit tento nový HTML5 tag, který zobrazí text opačně. To samozřejmě lze docílit i pomocí CSS3, ale takto je to jednodušší. Tag je součástí HTML5 specifikace, ale zatím je podporován jen ve Firefoxu a Chromu.   Kód: <p>Tento text je normálně.<bdo dir=“rtl“>Tento text je…

Průhledné bloky Na našem webu se můžete setkat s mnohými experimentálními funkcemi, tato je ovšem jednoduchá a využívá jen starší CSS. Dva bloky textu jsou umístěné částečně nad sebe a vrchní je částečně průhledný.   Kód: <div style=“position:relative“><div style=“background-color:blue; width: 300px; height: 200px; overflow: hidden“>První text</div><div style=“position: absolute; left: 150px; top: 100px; opacity: 0.4; background-color:…

Svislá načítací lišta Kromě standardu HTML5 vznikají i nyní další vlastní metody prohlížečů, například tato vertikální (svislá) načítací lišta dělaná pomocí HTML5 tagu a CSS3 vlastnosti oriantace (tedy nikoli pomocí CSS tranformace). Jde o funkci specifickou pro prohlížeč Mozilla Firefox a není v žádných oficiálních standardech, v ostatních prohlížečích se může zobrazit různě.   Kód:…

HTML5 video přehrávač s obrázkem při zastavení HTML5 video přehrávač nabízí různé možnosti správy, jako třeba tuto – pokud je video zastaveno, zobrazí se vlastní obrázek. (Jde o expetimentální funkce fungující jen v novějších prohlížečích)   Kód: <video src=“soubor s videem“ controls poster=“obrázek“> Omlouváme se, váš prohlížeč nepodporuje HTML5 přehrávač videí. </video> Ukázka: Omlouváme se,…

HTML5 video přehrávač Samozřejmě existuje mnoho přehrávačů videa které využívají např. Adobe Flash, ale tento je součástí HTML5. Přehrávač přehraje jen některé formáty videí a jen v novějších prohlížečích. Jde o stále experimentální funkci, takže nemusí fungovat spolehlivě, ale stejně to za zkoušku stojí 🙂   Kód: <video src=“soubor s videem“ controls> Omlouváme se, váš…

Jednoduchý přihlašovací formulář Na velké části webových stránek dnes již nalezneme přihlášení a na to je potřeba formulář, tak si ho můžete pouhým zkopírováním kódu dát i na svůj web. Formulář využívá HTML5, nemusí plně fungovat ve starších prohlížečích. Poznámka: Jde o HTML šablonu, formulář nebude sám o sobě fungovat, k tomu je potřeba následně…

Jednoduchý registrační formulář Na velké části webových stránek dnes již nalezneme formuláře pro registraci, tak si ho můžete pouhým zkopírováním kódu dát i na svůj web. Formulář využívá HTML5, nemusí plně fungovat ve starších prohlížečích. Poznámka: Jde o HTML šablonu, formulář nebude sám o sobě fungovat, k tomu je potřeba následně nějaký skript (asi PHP),…

Efektně se měnící text Pokud chcete dát na svůj web něco malého, co se mění, jako třeba reklamu nebo krátké novinky, jistě využijete tohoto skriptu. Jde o jednoduchý javascript, který za použití CSS3 přechodu skryje text, změní ho a zase odkryje. Při lehké znalosti javascriptu si můžete i přidat další texty, které se budou měnit…

Mizející odkaz Užitečné pravděpodobně pouze jako vtip, tento odkaz zmizí, jakmile na něj uživatel najede myší. Jednoduchá hříčka je dělaná pomocí CSS a obsahuje také CSS3 přechod (ten se nezobrazí ve starších prohlížečích). Vtip je v tom, že i po vizuálním zmizení odkaz funguje (:   Kód: <style> .odkaz { display: inline-block; transition: opacity 0.2s;…