Animace složky s odkazy
Animované ikony složek a dokumentů jsou jednoduchým způsobem, jak oživit běžné odkazy na webu. Místo klasického textového odkazu může návštěvník vidět čistou SVG ikonu, která se při najetí myší plynule vyplní barvou a současně změní doprovodný text na akční výzvu. Toto řešení je vhodné pro odkazy na dokumenty, provozní řády, faktury, certifikáty, archiv, úložiště nebo […]
Text s vlnkou
Animovaný HTML nadpis: jak funguje a proč je to elegantní řešení Na této stránce je použitý vlastní animovaný nadpis vytvořený pomocí kombinace HTML a CSS, bez potřeby JavaScriptu. Výsledkem je čistý, lehký a vizuálně zajímavý efekt, při kterém se jednotlivá písmena nadpisu postupně objevují odspodu nahoru. Celý text tak působí živě, moderně a přitom nerušivě. […]
HTML obrázky – vizuální obsah na webu
HTML obrázky a ilustrace Vizuální obsah na webu Jak na obrázky v HTML! Vkládání obrázků ve struktuře HTML a především jak do vašich webových stránek vkládat obrázky. Vizuální obsah hraje klíčovou roli v uživatelském zážitku, pomáhá předávat informace, zlepšuje estetiku a činí stránky poutavějšími. Element <img> je nejčastějším nástrojem pro oživení webu fotografiemi, ilustracemi a […]
HTML odkazy – páteř webu a navigace
HTML odkazy Páteř webu a navigace Popíšeme si jeden z nejdůležitějších elementů celého webu: odkazy. Odkazy, neboli možná lépe hypertextové odkazy, jsou tím, co dělá web „webem“ – umožňují nám procházet mezi dokumenty, stránkami a dokonce i různými částmi téže stránky. Bez odkazů by internet byl jen soubor izolovaných dokumentů. Pochopení, jak efektivně vytvářet a […]
Základy HTML – struktura webové stránky
Základy HTML Podrobný průvodce strukturou a sémantikou webových stránek Každá stránka, kterou vidíte online, je postavena na základech HTML (HyperText Markup Language). HTML je stavebním kamenem internetu, jazykem, který prohlížečům říká, jak mají zobrazit obsah – od textu a obrázků po interaktivní prvky. Pochopení základních HTML tagů a jejich funkce je klíčové pro každého, kdo […]
Běžící text v horní části obrazovky
Jedním z mnoha způsobů, jak udělat stránku zajímavou, je například v horní části obrazovky vytvořit běžící poutavý text, kterým například podpoříte prodej, nebo nabídku vašeho produktu. Kód níže Vám popíše jeden z mnoha způsobů, jak tento pruh v horní části vytvořit, a i nastavit podle Vašich představ. Další úpravy a nastavení již nechám na Vaší fantazii. Výsledek kódu […]
Tlačítko s neonovým efektem
Podud se chcete odlišit, je tlačítko je vždy to, co k tomu pomůže. Neonová záře, nepravidelné blikání a stín od tlačítka je dost výrazný prvek. Nejlépe však vypadá na hodně tmavém, nebo jako v tomto našem případě, na černém pozadí – background: black na řádku 29. Můžete si podle popisků přímo v kódu změnit téměř […]
Animace nadpisu s glow efektem
V tomto návodu si ukážeme, jak se objeví nápis, který má za nadpisem a okolo písmen Glow Effekt, z anglického glow – záře. Pokud budete mít v úmyslu vytvořit tuto animaci, je potřeba si nastavit základní barvu písma shodnou s pozadím. V tomto konkrétním případě je to v CSS kódu řádek 21 a barva pozadí […]
Změny barev na pozadí
Velmi jednoduchým zpestřením stránek je změna barvy na pozadí stránky. Samozřejmě je to možné vytvořit i pomocí „slideshow“ přímo v elementu, ale kód bude méně zatěžovat načítání stránek a je to také i méně pracné. Přičemž zůstává možnost pestrosti nastavení. Je možné použít několik způsobů, my si zde ukážeme asi ten nejjednodušší. Návod opět je […]
Animace nadpisu vlnkou
V případě, že potřebujete nějak zvýraznit nadpis animací, zde je jednoduchý návod, jak si upravit element HTML v Elementoru. Návod je praktikovatelný i na jiné programy, protože se skládá jak z HTML, tak ze stylování pomocí CSS. Tedy nejste omezeni jen na Elementor, ale můžete jej použít přimo do Vašeho programovaného projektu, anebo například ve […]
