Moderní tvorba webových aplikací

O webu

Obrázky

Obrázky jsou nedílnou součástí každé stránky.

V jakém programu upravovat obrázky

Jaký program zvolit pro rychlou úpravu obrázků.

2 minuty

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

4 minuty

Lazy loading obrázků

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

6 minut

SVG

SVG je grafický formát vhodný pro grafické prvky, které mají mít možnost měnit svou velikost.

28 minut

Zjištění barvy obrázku

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

4 minuty

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 minut

HTML 5 <video> vs. GIF

Jaké jsou výhody a nevýhody HTML5 videa oproti GIFu. Co kdy použít?

7 minut

Kdy začne stahování <img> obrázku

Kdy se začne stahovat obrázek připojený značkou <img>.

7 minut

Drag & Drop upload obrázků

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

13 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

Screenshot webu

Jak z webové stránky vytvořit obrázek (screenshot).

4 minuty

Zvětšení obrázku

Jakými způsoby řešit zvětšení malého obrázku.

4 minuty

Emoji

Emoji jsou grafické symboly (obrázky), které je možné zapsat jako běžné znaky.

3 minuty

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

Maximální šířka pozadí

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

2 minuty

Image-rendering

CSS vlastnost image-rendering ovlivňuje způsob, kterým se v prohlížeči zvětšují/zmenšují obrázky.

5 minut

Jaký formát obrázku použít na webu

PNG, GIF, JPG? Který datový formát obrázku volit pro použití na webové stránce.

10 minut

CSS vlastnost mask

Vlastnost mask dokáže vytvářet elementy s texturou nebo nepravidelnými tvary.

5 minut

Generování náhodných obrázků

Pro vývoj a testování webů se hodí znát způsoby, jak v okamžiku vložit do stránky ilustrační obrázek.

3 minuty

Popis obrázku

Jak na webové stránce přidat k obrázku popisek.

4 minuty

Plynulá změna obrázků

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

4 minuty

Border-image

CSS vlastnost border-image slouží k vytváření obrázkových rámečků.

8 minut

Grafický editor v prohlížeči

Jaké jsou možnosti pro provádění úprav obrázků (zvýraznění, přidání popisků apod.) přímo v prohlížeči.

3 minuty

Background-clip

CSS vlastností background-clip jde omezit místo, kde zobrazí obrázek na pozadí.

3 minuty

CSS blend

CSS vlastnost background-blend-mode slouží ke smíchání barvy s obrázkem.

5 minut

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

7 minut

Responsivní obrázky

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

5 minut

Více obrázků na pozadí

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

5 minut

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

3 minuty

Velký obrázek na pozadí stránky

Jak správně udělat obrázkové pozadí celé stránky, které se přizpůsobí velikosti okna.

5 minut

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