Moderní tvorba webových aplikací

O webu

Hotová řešení

Hotová řešení s živými ukázkami

Výpis náhodného textu

Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

5 minut

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Parsování HTML v JavaScriptu

Jak v klientském i serverovém JS parsovat a upravovat HTML kód.

7 minut

Získání unikátní barvy pro text v JS

Jak pro libovolný řetězec spočítat unikátní barvu.

3 minuty

JS podmínka v objektu

Jak v JavaScriptu zapsat podmínku uvnitř objektu.

2 minuty

Build jednoduchého JS pro staré prohlížeče

Jak zajistit transformaci jednoduchého JavaScriptu i pro staré prohlížeče jako IE 11.

6 minut

Jak skrýt posuvník v <iframe>

Jak pomocí CSS skrýt scrollbar u stránky vložené přes <iframe>.

2 minuty

Náhled URL

Jak získat obrázkový náhled a další informace pro libovolnou URL.

3 minuty

Video Playwright testu

Jak uložit video automatického testu.

2 minuty

Jak vytvořit tmavý režim / dark mode v CSS

Jak co nejlépe vytvořit pro web tmavý režim, aby automaticky respektoval nastavení uživatele.

15 minut

Offline stránka v PWA přes ServiceWorker

Jak udělat web fungující offline. A splnit tak požadavky na PWA.

12 minut

Barva podle odrolování na stránce

Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.

3 minuty

CSS pravidla any-pointer a any-hover

CSS pravidla @media any-pointer a any-hover slouží k detekci přesnosti a typu ovládání.

7 minut

Zadávání kalendářního data

Pohodlné zadávání kalendářního data ve formulářích.

5 minut

Kulaté okraje v CSS

Jak vytvořit v CSS zaoblené okraje.

6 minut

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

11 minut

Pořadí CSS vlastností

Jak správně řadit jednotlivé CSS vlastnosti v rámci jednoho bloku příslušícímu k selektoru.

9 minut

Přepínání tříd v JS

Přepínání, přidávání a odebírání CSS tříd JavaScriptem.

6 minut

Lepší podtržení odkazu

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

4 minuty

Media queries v JavaScriptu

Jak v JavaScriptu používat @media pravidla jako v CSS.

6 minut

Zalamování dlouhých slov

Jak si poradit s dlouhými slovy, které by mohly narušit layout stránky.

5 minut

Rozpoznávání hlasu

Jak psát na web převodem hlasu na text pomocí speechRecognition.

6 minut

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

11 minut

Vytváření vlastních HTML značek

Je možné si kromě standardních HTML tagů vytvořit nějaké vlastní?

6 minut

Vlastní hláška alert

Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.

4 minuty

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

6 minut

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

4 minuty

Upload obrovských souborů v JS/PHP

Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.

7 minut

Odkaz pro předvyplnění SMS

Jak dát na stránku odkaz, který na mobilech předvyplní číslo a text SMS.

5 minut

Hromadné datové zmenšení obrázků

Chceme-li zrychlit načítání své stránky, datová optimalisace obrázků může pomoci.

6 minut

Zjištění barvy obrázku

Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.

4 minuty

Zaokrouhlení času

Jak v PHP zaokrouhlit čas na celé pětiminuty, čtvrthodiny nebo půlhodiny.

2 minuty

Napovídání poskytovatele e-mailu

Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.

6 minut

Výpočet průměru a mediánu v PHP/JS

Jak v jazyce PHP nebo v JavaScriptu spočítat medián.

4 minuty

Kam umístit popisky formuláře

Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.

7 minut

Jak (ne)přenášet referer

Jak zablokovat přenášení informace o předchozí navštívené stránce.

8 minut

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

7 minut

Parsování HTML v PHP

Jak v PHP parsovat HTML stránku a získat z ní potřebná data.

7 minut

Získání obsahu stránky přes oEmbed

Formát oEmbed slouží k pohodlnému získání obsahu stránky bez nutnosti jejího parsování.

6 minut

Ikona stránky favicon

Jak správně vytvořit ikonku stránky (favicon) pro desktop i mobily.

16 minut

Responsivní hledací formulář

Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.

6 minut

Ikona vedle odkazu

Jak přidat a zarovnat ikonku vedle odkazu, který má podtržení.

5 minut

Generování PDF

Vytváření PDF dokumentů v JavaScriptu a PHP.

4 minuty

Umístění kursoru v poli

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

3 minuty

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

7 minut

Vlastní komponenty v Nette

Komponenty v Nette dokáží bránit opakování stejného kódu.

5 minut

Zkosení hrany v CSS

Jak vytvořit šikmou hranu (zkosení) CSS bloku.

5 minut

Vykonání JS načteného AJAXem

Jak provést JavaScript, který je ve stránce načítané AJAXem.

4 minuty

Vlastní Latte filtr

Jak si vytvořit vlastní filtr (helper) do Latte šablon v Nette Frameworku.

4 minuty

Odkaz přes celý box

Jak udělat, aby celý box s několika prvky byl klikací.

4 minuty

HTTP autorisace v .htaccess

Jak souborem .htaccess jednoduše omezit přístup na stránku heslem.

3 minuty

Vyšší tlačítko ve Firefoxu

Prohlížeč Firefox má zajímavou vlastnost u formulářových tlačítek. Dělá je vyšší než ostatní prohlížeče.

3 minuty

Velikost písma podle šířky

Jak přizpůsobovat velikost písma aktuální šířce stránky.

5 minut

Nová stránka v JavaScriptu

Jak v JavaScriptu vytvořit novou HTML stránku.

4 minuty

Jeden sloupec fixní, druhý proměnlivý

Jak vytvořit dvousloupcové rozvržení, kde je jeden sloupec s pevnou šířkou a druhý se přizpůsobuje šířce okna.

6 minut

Zalomení tlačítka na více řádků

Jak zabránit nechtěnému zalomení tlačítka na více řádků.

3 minuty

Oddělovač položek v menu

Jakými způsoby v CSS lze realisovat oddělovač položek v menu.

6 minut

Doba čtení stránky

Jak zobrazit přibližnou dobu, kterou zabere čtení stránky.

6 minut

Jak zabezpečit číslo objednávky v e-shopu

Jakým způsobem bezpečně sestavit číslo objednávky zboží v e-shopu.

5 minut

Drag & Drop upload obrázků

Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.

13 minut

Automatická výška <iframe> podle obsahu

Definitivní řešení automatického nastavování velikosti <iframe> podle výšky obsahu.

6 minut

Nastavení výšky responsivního obrázku

Jak zabránit poskakování responsivních obrázků během načítání stránky.

8 minut

Přečtení textu webu

Jak obsah webové stránky přečíst hlasem.

4 minuty

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

5 minut

Mezera v PSČ

Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.

4 minuty

Změna adresy JavaScriptem

JavaScript může měnit URL. Jak a v jakých případech toho využívat.

4 minuty

Převod milisekund

Převodník milisekund.

2 minuty

Elipsa/ovál v CSS

Jak pomocí CSS nakresli ovál.

2 minuty

Vypnutí Emoji ve WordPressu

Jak ve WordPressu zakázat grafické symboly Emoji.

2 minuty

Generování QR kódu

Co je to QR kód a jak ho okamžitě vytvořit pomocí jednoduchého online generátoru.

15 minut

Posunutí obsahu v CSS

Jak posunout jakýkoliv element někam jinam.

5 minut

Text v obrázku

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

6 minut

Popisek formulářového pole

Jakým způsobem řešit popisky formulářových prvků.

6 minut

Kopírování do schránky

Jak s použitím JS zkopírovat uživateli nějaký text do schránky.

9 minut

Převod webu na responsivní design

Jak webovou stránku co nejlépe a nejjednodušeji převést do responsivní podoby.

20 minut

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

Plynulé rozbalení obsahu

Jak pomocí CSS animace a JavaScriptu plynule rozbalit původně skrytý obsah.

4 minuty

Pozadí jenom za písmeny

Jak vytvořit nadpis, který má pozadí jen za písmeny.

4 minuty

Hodnota zaškrtnutého radio <input>u

Jak v JavaScriptu zjistit hodnotu označeného radio políčka.

3 minuty

Měření blokování reklam v Google Analytics

Jak pomocí Google Analytics změřit návštěvníky, kteří blokují reklamy.

3 minuty

Části webu přes celou šířku

Jak jen některé části webu roztáhnout přes celou šířku.

3 minuty

Tolerance myši u vysouvacího menu

Při vytváření menu reagujícího na najetí myši (hover) je dobré tolerovat nepřesnou cestu myší.

6 minut

Styl odrážkového seznamu

CSS vlastnost list-style upravuje vzhled seznamů <ul> a <ol>.

11 minut

Zobrazení náhodného čísla

Jak vygenerovat náhodné číslo z určitého rozsahu v JavaScriptu a PHP.

5 minut

Vložení ze schránky onpaste

JavaScriptová událost onpaste slouží k odchycení vložení obsahu ze schránky.

2 minuty

Zvětšení a zmenšení v CSS

Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.

5 minut

Zvýraznění sloupců/řádků tabulky po najetí

Jak při najetí myší na tabulku zvýraznit příslušné sloupce a řádky.

5 minut

Směr rolování kolečkem

Jak podle směru otáčení kolečka myši měnit velikost obsahu.

5 minut

České skloňování

Jak v JS, PHP nebo CSS správně vytvořit skloňování slov pro české prostředí.

3 minuty

JS akce po kliknutí na odkaz

Na co si dát pozor při obsluhování odkazu JavaScriptem.

4 minuty

Drag & Drop v JavaScriptu

Jak vytvořit „drag & drop“ přesouvání prvků po stránce v JavaScriptu.

6 minut

Posun v poli přes okraje

Jak se z poslední položky pole dostat na první a obráceně.

3 minuty

Plynulá změna obrázků

Jak na stránce automaticky plynule měnit obrázky.

4 minuty

Průběh načítání AJAXu

Při odesílání dat AJAXem je dobré dát uživateli vědět, že se něco děje.

8 minut

Zjištění vypnutých cookies

Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.

5 minut

Oříznutí víceřádkového obsahu

Jak oříznout dlouhý text po stanoveném počtu řádek.

5 minut

Beacon API

Beacon API umožňuje asynchronně zaslat data na server při opuštění stránky.

4 minuty

Načítání CSS bez blokování vykreslování

Jak asynchronně načítat CSS, aby neblokovalo vykreslování stránky.

7 minut

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

5 minut

Identifikátor z písmen a čísel

Jak místo dlouhého číselného identifikátoru použít kratší kombinaci písmen a čísel.

4 minuty

Vložení videa z Facebooku na web

Jak na vlastní stránku vložit video z Facebooku.

4 minuty

Šachovnicový výpis položek

Jak vypsat položky sestávající ze dvou sloupců, aby se pořadí sloupců střídalo.

4 minuty

Škrtnutí značkou <s>

Značka <s> slouží k označení obsahu, který už je zastaralý nebo není relevantní.

4 minuty

Responsivní design webu

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

17 minut

Margin, border a absolutní posicování

Jak se chová margin a border u absolutně posicovaných elementů.

4 minuty

Zjištění výsledného CSS v JavaScriptu

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

2 minuty

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

4 minuty

Nejnovější komentáře z Disqus

Jak vypsat nejnovější komentáře z diskusní platformy Disqus.

3 minuty

Video-záznam obrazovky do GIFu

Jak nahrát video obrazovky a uložit ho jako pohyblivý obrázek (GIF).

4 minuty

Odeslání příspěvku na stránku přes FB API

Jak v PHP odesílat příspěvky na Facebook stránku (Page) pomocí Facebook API.

5 minut

Zjištění směru rolování

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

2 minuty

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

5 minut

CSS flip a animace

Jak v CSS otočit obsah kolem svislé nebo vodorovné osy.

4 minuty

Výška závislá na šířce

Jak v CSS nastavit výšku v závislosti na procentuální i pevné šířce.

4 minuty

Výpis souborů ve složce

Jak v PHP vypsat a podle názvu či data seřadit obsah složky.

3 minuty

Vytváření grafů v JavaScriptu

Snadná tvorba sloupcových, koláčových a dalších (i animovaných) grafů v JavaScriptu.

5 minut

Menu přes celou šířku

Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

3 minuty

Plynulý přechod mezi stránkami

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

3 minuty

Hover efekty s text-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti text-shadow.

4 minuty

Hover efekty s box-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

4 minuty

Dynamický update času „před X minutami“

Jak skriptem na stránce průběžně aktualisovat datum v podobě „zasláno před X minutami“.

4 minuty

JS tooltip

JavaScriptový popisek po najetí myší na ikonu nebo text.

4 minuty

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

5 minut

Zjištění majitele domény

Jak PHP skriptem ověřit, zda je doména volná nebo kdo je její vlastník.

1 minuta

Cacheování obsahu cizí stránky

Jak cacheovat výsledky obsahu staženého z cizí stránky.

2 minuty

Odstranění obsahu HTML elementu

Jak v JavaScriptu odstranit všechny potomky v určitém HTML elementu.

1 minuta

Lokalisace podle IP

Jak na základě IP adresy lokalisovat návštěvníka webu.

2 minuty

File_get_contents a timeout

Jak omezit maximální čas získávání obsahu stránky z URL.

3 minuty

Inline-block a bílé znaky

Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).

3 minuty

Universální hover efekt pro různé barvy pozadí

Jak vytvořit universální :hover efekt pro různě barevná tlačítka.

6 minut

Překlad stránky

Snadná lokalisace webu do různých jazyků.

3 minuty

Je stránka aktivní?

Zjišťování, jestli je stránka aktivní a zda návštěvník něco dělá.

1 minuta

Automatické generování obsahu stránky

Automatické generování obsahu HTML stránky v JavaScriptu i PHP.

4 minuty

Ikona přehrávání v <title>

Symbol přehrávání ▶ v titulku stránky jako je u videí na YouTube.

3 minuty

BB kód v PHP

Formátování příspěvků pomocí BB code v PHP. Převod BB kódu do HTML.

7 minut

Ovládání webu klávesami v JavaScriptu

Odchytávání stisknutých kláves a vytváření klávesových zkratek v JavaScriptu.

5 minut

Confirm

Confirm je JavaScriptová hláška pro potvrzení akce. Jak ji používat nebo nahradit vlastním dialogovým oknem.

3 minuty

Otevírání nového okna

Možnosti, jak otevřít stránku do nového okna / nového tabu prohlížeče.

5 minut

CSS animace průběhu načítání

Jak využitím CSS transition a špetky JavaScriptu vytvořit animované znázornění průběhu načítání, jako je třeba na YouTube.

4 minuty

Vytváření modulů v JavaScriptu

Jak psát složitější věci v JavaScriptu. Obalit společné funkce do „modulů“.

5 minut

Rychlé kliknutí a vyvolání události

Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.

3 minuty

Tutoriál na webu

Jak vyrobit jednoduchý tutoriál pro seznámení se s webovou aplikací.

7 minut

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

2 minuty

Česká písma z Google Fonts

Seznam fontů z Google Fonts, které obsahují znaky s diakritikou pro psaní českého textu.

30 minut

Animace čísel

Animování číselných dat pomocí JavaScriptu.

3 minuty

Generátor CSS šipek

Generátor šipek/trojúhelníků přímo v CSS pomocí okrajů. Funkční i ve starých IE.

2 minuty

Rozbalování a sbalování obahu v CSS

Jak skrývat a odkrývat části stránky v čistém CSS bez jakéhokoliv JavaScriptu.

3 minuty

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

3 minuty

Detekce blokování reklam Adblockem

Jak detekovat, že si uživatel na stránce blokuje reklamy. Dá se „ad block“ obejít?

4 minuty

Responsivní obrázky

Co s obrázky na mobilních zařízeních?

5 minut

Změna location.hash bez posunu stránky

Jak změnit location.hash bez posunutí stránky.

2 minuty

CSS ikony

Ikony bez obrázků v čistém CSS.

4 minuty

Offline webová stránka

Jak umožnit návštěvníkům stažení celé webové stránky pro prohlížení offline, umístění na CD apod.

3 minuty

Obrana proti spamu

Jak se na webu bránit spammerům z řad robotů i návštěvníků.

9 minut

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

4 minuty

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

6 minut

CSS sprite

Spojení všech obrázků do jednoho (CSS sprite) zrychlí načítání webu. Hotový generátor v PHP.

8 minut

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

2 minuty

Počet znaků a slov v textu

Jak spočítat délku (počet znaků), počet slov, řádků nebo odstavců v textu.

4 minuty

Výběr barvy

Jak umožnit uživateli vybrat barvu z palety (pomocí JavaScriptu i bez JS).

5 minut

Více obrázků na pozadí

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

5 minut

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

5 minut

AJAX

Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.

9 minut

Vlastní kontextová nabídka

Jak po stisknutí pravého tlačítka myši zobrazit vlastní nabídku.

4 minuty

Zjištění souřadnic myši

Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).

2 minuty

Označení kódu nebo textu po kliknutí

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

3 minuty

Více náhledů videa

Jak při najetí myší na náhled videa zobrazovat další náhledy.

5 minut

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

3 minuty

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

3 minuty

Oříznutí dlouhého textu

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

5 minut

Horizontální navigace

Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

5 minut

JavaScriptová simulace atributu ismap

HTML atribut ismap umí zjistit souřadnice při kliknutí na obrázek. Jak na to v JS?

1 minuta

Získání obsahu cizí stránky

Jak v PHP a JavaScriptu získat obsah z cizí webové stránky.

3 minuty

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

5 minut

Rozmazání obsahu

Rozmazávání obsahu v různých prohlížečích.

4 minuty

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

3 minuty

Průhledný obsah v CSS

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

6 minut

Obrázek jako odrážka

V CSS je možné přidat textu (seznamu) obrázkovou odrážku, jaké to má úskalí a risika?

3 minuty

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

5 minut

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

4 minuty

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

7 minut

Rotace obsahu

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

4 minuty

Jednoduchý web v PHP

I web o pár stránkách je vhodné skládat automatisovaně. Jak na to v PHP?

5 minut

Skutečné rozměry obrázku

Jak může JavaScript zjistit skutečnou výšku a šířku obrázku.

2 minuty

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

3 minuty

Sloupce stejně vysoké

Různé možnosti, jak zajistit automatické roztažení různě vysokých sloupců na stejnou výšku.

5 minut

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

3 minuty

PHP proxy skript na 50 řádků

Hotový PHP skript umožňující zobrazit web prostřednictvím jiné IP adresy.

5 minut

Jak zakázat scrollování na stránce

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

3 minuty

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

3 minuty

Kruhový obrázek

Různé možnosti vytvoření kruhového obrázku.

2 minuty

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

3 minuty

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

6 minut

Rozklikávací menu

JavaScriptové menu otvírající/zavírající se po kliknutí.

4 minuty

Získání náhledu/obrázku webu

Jak lze automaticky získat obrázkový náhled webové stránky.

4 minuty

Absolutně posicované pozadí

Jednoduché řešení vícebarevného pozadí absolutním posicováním.

2 minuty

Vyjížděcí menu v CSS

Jak vytvořit v čistém CSS vyskakovací menu.

3 minuty

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

3 minuty

Řešení nepřehledných stromových diskusí

Je-li na webu stromová diskuse s hodně příspěvky, může být pro diskutující obtížné udržet přehled, co četli a co ne.

3 minuty

Černobílý styl obrázku

Jak v CSS zajistit černobílý styl běžného obrázku. Napříč prohlížeči stále panují rozdíly.

5 minut

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

3 minuty

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

5 minut

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

3 minuty

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

3 minuty

Pročištění a opravení „prasáckého“ HTML

Jak z WYSIWYG editorů (jako třeba Word, starší TinyMCE/CKEditor) vytvořit rozumný a sémantický HTML kód.

5 minut

Označení odkazu na kotvu, pokud je na ní odrolováno

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

4 minuty

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

4 minuty

Odrolování na určitý HTML tag

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

3 minuty

Jednoduché filtrování dat v čistém CSS

Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

3 minuty

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

3 minuty

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

1 minuta

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

3 minuty

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

6 minut

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

1 minuta

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

4 minuty

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025