Obrázky

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

Všechny články z kategorie

Object-fit

Object-fit

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

Lazy loading obrázků

Lazy loading obrázků

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

SVG

SVG

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

Zjištění barvy obrázku

Zjištění barvy obrázku

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

Responsivní logo

Responsivní logo stránky

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

HTML 5 video vs. GIF

HTML 5 <video> vs. GIF

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

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

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

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

Drag & Drop upload obrázků

Drag & Drop upload obrázků

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

Nastavení rozměrů responsivního obrázku

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

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

Jak udělat screenshot webu

Screenshot webu

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

Zvětšení obrázku

Zvětšení obrázku

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

Obrázkový text

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.

✌ Emoji

Emoji

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

Max-width pro pozadí

Maximální šířka pozadí

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

Image-rendering

Image-rendering

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

Jaký zvolit formát obrázku

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.

CSS mask

CSS vlastnost mask

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

Generátor náhodných obrázků

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.

Popis obrázku

Popis obrázku

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

Slideshow obrázků

Plynulá změna obrázků

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

Border-image

Border-image

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

Grafický editor v prohlížeči

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.

Background-clip

Background-clip

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

CSS blend

CSS blend

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

CSS gradient

Gradienty v CSS

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

Responsivní obrázky

Responsivní obrázky

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

Vícenásobné CSS pozadí

Více obrázků na pozadí

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

CSS obrázková galerie

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

Fotografie na pozadí

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.