Místo pro zvědavé medvědy

Search
bear-hugs-alan-kabes-webdesign

Tlačítko s neonovým efektem

css-3-pro-bear-hugs-webdesign-tvorba-webu

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

css-3-pro-bear-hugs-webdesign-tvorba-webu

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í

css-3-pro-bear-hugs-webdesign-tvorba-webu

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

css-3-pro-bear-hugs-webdesign-tvorba-webu

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 […]

Objekt s rotací

Objekt s rotací I tady si při kopírování a vložení do elementu “Zkrácený kód” můžete udělat ještě několik základních úprav. Postupujte prosím takto: řádek 3 a 4 nabízí úpravu proporcí objektu, řádek 5 definuje sílu a barvu okraje objektu, řádek 6 je nastaven bez pozadí, protože takto se objekt tváří, jako by se vznášel, a […]

Animace nadpisu s kurzorem

bear-hugs-tvorba-webovych-stranek-elementor-css-kody-co-pomahaji

Animace nadpisu s kurzorem Pokud si chcete vložit tento kód do Vašeho projektu, musíme si ještě upřesnit několik detailů. Při kopírování a vložení do “custom CSS” je možné udělat ještě několik základních úprav. Postupujte prosím takto: Vytvořte Nadpis v Elementoru podle vlastních potřeb, určete důležitost nadpisu v HTML (H1, H2, H3…). Nastavte si atributy zarovnání, […]

Změna barvy v nadpisu

bear-hugs-tvorba-webovych-stranek-elementor-css-kody-co-pomahaji

Změna barvy v nadpisu Zajímavou animací, která může působit elegantně je změna barvy nadpisu. Kód níže vám stím může pomoci. Atributy písma si nastavíte v elementu “Nadpis”. Takže font, velikost, zarovnání a pokud se nám, jako v tomto případě jedná o nadpis nejvyšší úrovně, nastavíme HTML Značku na H1. Řádek 1) Nastavení úrovně nadpisu (musí […]

Jednoduché odkazy

bear-hugs-tvorba-webovych-stranek-elementor-css-kody-co-pomahaji

Jednoduché odkazy Poměrně banální záležitost, na kterou se někdy zapomíná. Níže jsou popsány základní odkazy, které použijete například v patičce vašich webových stránek. Pojdme si je připomenout. Odkaz na naše stránky www.bearhugs.cz. Řádek 4) Název, resp. nadpis odkazu Řádek 5) Úprava zdroje písma na “Roboto Light“ Řádky 10-12) Specifikují jak má být písko veliké, jakou […]

Pohyb obrázku – jednoduchý

bear-hugs-tvorba-webovych-stranek-elementor-css-kody-co-pomahaji

Pohyb obrázku – jednoduchý Jednoduchou animaci objektu vytvoříte přidáním kódu níže. V kódu je vytvořená animace pohybu zleva doprava v plné šíři zobrazení. Co si můžete lehce upravit? Například délku animace v řádku 3) “animation“ Dále pak je možné upravit rozsah animace z levé, popřípadě z pravé strany. Zde vidíte výsledek kódu selector img { […]

Objekt v pohybu + změna barvy

Objekt v pohybu + změna barvy Pokud máte v úmyslu přidat na stránky objekty v pohybu, tak k tomu můžete použít kód níže. Výsledek je buď tento, kde například šířka objektu je 150px a výška 3px – v kódu řádek 12. až 14. pod: width: 150px; height: 5px;. A co se animace týče, můžete upravit […]