Vylepšete si pozadí stránek s online generátory

31. 10. 2013

Podíváme se na nejrůznější generátory, které pomáhají v práci nejenom profesionálům, ale můžou zlepšit vzhled i vašeho webu. Na internetu jich je spousta, snažil jsem se vybrat ty nejzajímavější a uživatelsky nejpříjemnější.

Background Image Generator

http://bg.siteorigin.com/

Pozadí se vzorem dle vašeho vkusu? Žádný problém s Background Image Generátorem. Barva, vzor a prolnutí vrstvy jsou hlavní volby, které asi netřeba upřesňovat (u prolnutí vrstvy doporučuji experimentovat).

Dále můžete posuvníky nastavit hustotu vzoru (pattern) a přidat i šum. Při troše času a snahy se dají z tohoto generátoru získat efektní a jednoduchá pozadí.

Hotové pozadí si pak stáhnete tlačítkem Download. Stažený obrázek nahrajte do libovolné fotogalerie v inPage a pokud chcete obrázek použít na pozadí celého webu, tak do vlastního stylopisu přidejte následující zápis (název obrázku samozřejmě upravte dle vašeho):

body {
 background-image: url("/obrazky/3/moje-pozadi-png/");
 }

ZenBG - Background Generator

http://mudcu.be/bg/

Velmi zajímavý generátor, který kombinuje barevné přechody s texturami nejrůznějších materiálů. Nejprve si vlevo nahoře vyberte texturu, nastavte jí průhlednost (Alpha) a také měřítko zobrazení (Scale).

Pak už stačí jen vybrat barvu přechodu (gradientu), kterou chcete editovat. Editaci provádíte v levém okně s výběrem barev, můžete také vybrat pozici dané barvy. Do přechodu můžete také přidat více vlastních barev. Nebojte se experimentovat a zkoušet různé kombinace nastavení.

Jakmile jste s výsledkem spokojeni, klikněte na modré tlačítko "Generate CSS3". Budtete přesměrování na novou stránku, kde si uložte oba obrázky které vidíte (přes pravé tlačítko myši a volba "Uložit obrázek jako...". Oba obrázky nahrajte do libovolné fotogalerie v inPage.

Nezapomeňte si také zkopírovat část CSS kódu, který vložíte do inPage do editoru vlastního stylu. Jen v něm bude potřeba upravit URL adresy k obrázku, výsledný zápis pro pozadí celého webu by mohl vypadat například takto (pokud jste nezměnili jména souborů):

 body {
 background: #969696;
 background-image: url("/obrazek/3/zenbg-1-png"), url("/obrazek/3/zenbg-2-png");
 background-repeat: repeat-y, repeat;
 }

Noise Texture Generator

http://www.noisetexturegenerator.com/

Generátor pozadí se šumem (anglicky noise). První posuvník je průhlednost, druhý posuvník je hustota (density), můžeme ještě nastavit velikost textury v pixelech a barvu pozadí.

Specialitou tohoto nástroje je možnost vytvořit poloprůhledné PNG s průhledností v alfa kanálu (zatrhnete Transparent noise), takže Vámi vytvořená textura se může zobrazovat přes klasické barevné pozadí, které běžně v CSS upravujete. Slouží k tomu vlastnosti background-color a background-image.

Jak v reálu na to? Nejprve nastavíme barvu pozadí a následně zadáme cestu k vytvořenému obrázku. Stylopis pro pozadí celého webu může vypadat nějak takto:

body {
 background-color: #D00000;
 background-image: url("/obrazky/3/moje-pozadi-png/");
 }

Výhodou je, že textura se nemění, ale barevnost mohu měnit přímo bez nutnosti upravovat původní obrázek. Lépe tak doladíte barvu, která se hodí k vaší prezentaci. Odpadá zdlouhavé nahrávání nových a nových obrázků, řešíte jen vzor na textuře.

Nevýhodou je, že poloprůhledné PNG není podporováno v IE6. Pokud chcete tedy stránky optimalizovat i pro tento prohlížeč, je lepší si nechat vygenerovat klasické PNG bez průhlednosti.

ColorZilla - gradient editor

http://www.colorzilla.com/gradient-editor/

Určitě nástroj, který si rychle oblíbíte. Jedná se o editor, ve kterém vytváříte barevný gradient (česky přechod) čistě za použití CSS (kaskádových stylů).

Vytvořený kód je kompatibilní s většinou prohlížečů, pouze u IE6 - 8 je třeba myslet na to, že přechod může mít pouze dvě barvy umístěné v 0% a ve 100%. Pro ostatní prohlížeče a IE9+ lze vytvářet i více barevné přechody (tzv. multi-stop gradienty). Jen pro IE9 je třeba navíc přidat do stránky kus HTML kódu a požadovaný prvek musí mít přiřazen třídu .gradient (toho bohužel v inPage nelze dosáhnout).

Vše je popsáno podrobně v poznámce pod oknem s CSS stylem. Osobně však kvůli kompatibilitě doporučuji používat pouze dvoubarevné přechody. Ušetříte si tak spoustu starostí při další editaci vašich stránek nebo kopírováním stylů k dalším prvkům.

Můžete si vybrat z řady již vytvořených přechodů a nebo vytvořit vlastní, který pak můžete uložit pro další použití. Můžete také vytvořit permalink (trvalý odkaz) k vámi vytvořenému gradientu (přechodu) a poslat ho třeba kolegovi, nebo si jej jednodušše přidat do záložek.

Další zajímavou funkcí je možnost vygenerovat přechod už z hotového CSS nebo z obrázku, který obsahuje přechod dvou barev. Hodí se hlavně pokud děláte úpravy na starším webu a chcete zachovat základní barevnost a nebo dělat jen jemné úpravy. Dělá se pomocí tlačítek Import from image a Import from CSS.

Nejmocnější je ovšem možnost, dělat poloprůhledné přechody, např. z bílé do pozadí. Průhlednost nastavujete posuvníkem Opacity (musí být měnší než 100%). Můžete také vytvořit "přechod" ze dvou stejných barev pouze s různou průhledností. To se hodí pokud máte stránku už barevně natónovanou a chcete mít prvky ve stejných odstínech.

Vytvořené pozadí nahrajete do inPage zkopírováním vytvořeného CSS stylu (ideálně využít tlačítko copy) do vlastního CSS stylu šablony v sekci Vzhled. Pokud například chcete nastavit pozadí celé stránky, bude zápis vypadat nějak takto:

 body { background: rgb(255,183,194); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255,183,194,1) 0%, rgba(86,0,18,1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,194,1)), color-stop(100%,rgba(86,0,18,1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255,183,194,1) 0%,rgba(86,0,18,1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255,183,194,1) 0%,rgba(86,0,18,1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255,183,194,1) 0%,rgba(86,0,18,1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(255,183,194,1) 0%,rgba(86,0,18,1) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb7c2', endColorstr='#560012',GradientType=0 ); /* IE6-9 */
 }

K čemu uvedené generátory využít?

Všechny příklady jsou napsané pro pozadí celých stránek (body). Můžete však takto nastavit pozadí jakémukoliv prvku např. menu nebo tlačítku. Pozadí lze také kombinovat, nastavit různé efekty při najetí myši a mnoho dalšího. Nebojte se experimentovat a začněte vylepšovat váš web ještě dnes.

Přeji Vám hodně kreativních nápadů.