Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Online generátory CSS stylů pro moderní webmastery

Tvoříte weby a stále vás zajímá jak pracovat efektivněji? Tak to tu jste dobře! V tomto článku si ukážeme přehled nejpoužívanějších vychytávek, které vám zpříjemní práci.

Nejdříve si ukážeme devbook Colorpicker a Tlačítkovač od Drahoše. Poté se podíváme na Stripemania, který za nás vytvoří pruhové pozadí. Dále na Color Scheme Designer, díky kterému vytvoříme hezky sladěný web. Jako další bude následovat FontSquirrel, který nám poskytne nádherné písmo. Pak tu budeme mít Gradient editor, kde si můžeme udělat hezké přechody. Jako předposlední zde bude Font Awesome, aneb obrázky v textu. A na závěr si ukážeme Noise Texture Generator, který nám vytvoří hezké textury.

Colorpicker

Skvělá aplikace od Drahoše, ve které si namícháte mnoho odstínů vaší oblíbené barvy.

Kdybyste například měli příliš výraznou barvu, není nic jednoduššího než snížit hodnotu sytosti.

Hodnoty můžete zadat jak ručně, tak zvolit pomocí myši.

HTML Colorpicker - CSS3 zdrojákoviště

Aplikaci naleznete na http://www.itnetwork.cz/…ml-css-barev

Stripe Generator

Určitě se většina z vás divila, jak mohou mít ty weby tak dobré pruhované pozadí. Zkoušeli jste si udělat něco podobného v Gimpu nebo Photoshopu, ale výsledek stál popravdě za nic?

Nyní je tu Stripe Generator, který vykouzlí vaše tajná přání a dopřeje vám proužkované pozadí. :)

Pomocí této aplikace dodáte webovým stránkám šmrnc a všichni vám budou chválit váš vzhled.

Není nic snadnějšího než vyzkoušet!

CSS3 zdrojákoviště

Aplikaci naleznete na http://www.stripegenerator.com/

Paletton

Co tato aplikace vlastně dělá? :O

To je velice jednoduché! Zvolíte si minimálně jednu barvu a program vám vypočítá barvy, které se k vaší nejvíce hodí.

Navíc se můžete podívat na možný vzhled webových stránek a to hned ve dvou provedeních, tmavém a světlém.

Toto se dá dobře využívat na webech, kde chcete mít určitý počet barev. Přece jen je lepší, když se k sobě hodí :)

Paletton - CSS3 zdrojákoviště

Aplikaci naleznete na http://paletton.com/

FontSquirrel

Na této stránce najdete plno okouzlujících písem. Písma jsou označena čtyřmi obrázky, které označují jejich volné používání. Co víc si přát, než stránku plnou bezplatných písem? Na stránce si můžete zobrazit nejlépe hodnocená písma nebo nějaké přidat.

Font Squirrel - CSS3 zdrojákoviště

Aplikaci naleznete na http://www.fontsquirrel.com/

Gradient editor

Pokud chcete dodat vašim webovým stránkám nějaký super vzhled a nejste zrovna grafik, tak je tato stránka určena přímo vám!

V nabídce je i řada přednastavených možností :)

Jestli však chcete, můžete si udělat vlastní a věřím že bude hezké!

Nechybí ani podpora IE9 a přidání css komentářů. Formát barev si můžete nastavit na HEX, RGB, RGBA, HSL nebo na HSLA.

Gradient editor - CSS3 zdrojákoviště

Aplikaci naleznete na http://www.colorzilla.com/…ient-editor/

Font Awesome

Měli jste někdy potřebu či nutnosti mít obrázek, ale z nějakého důvodu jste ho nemohli použít? Díky Font Awesome budete mít plnou řadu obrázků v textové podobě.

Obrázky (text) si pak můžete díky síle CSS upravit tak, jak uznáte za vhodné.

Ikonky jsou vektorové, proto se vám vaše obrázky nerozmažou.

Font Awesome je "napůl" zdarma. Font obsahuje přes 1,598 ikonek zdarma a přes 7,848 ikonek Premium. Toto písmo je prostě geniální. Už žádné zbytečné obrázky, my teď používáme font! Menu, tlačítka, formuláře, všechno bude nádherné !

Tak stáhněte font a nahrajte v CSS. Život bude o tolik snazší ! :)

Font awesome - CSS3 zdrojákoviště

Aplikaci naleznete na https://fontawesome.com/

Noise Texture Generator

Děláte weby s jednobarevným pozadím jelikož grafika není vaše druhé jméno? Nevadí! Díky tomuto generátoru vytvoříte téměř ihned jiný kabátek pro váš web.

Ač se to nezdá, jednoduchý šum na hezké barvě umí vykouzlit nádherný kabátek pro váš web.

Zvolíte krytí, hustotu a také hezkou barvu a aplikace zbytek udělá za vás :) Aplikace také dovoluje vytvořit průhlednou texturu.

Aplikace podporuje uložení do vašeho rozlišení, avšak pozor, základní rozlišení je 200x200, na němž vám to aplikace předvádí, když zvolíte pro export textury například rozlišení 100x200, nemusí se textura shodovat s ukázkovou. Může vám tedy vzniknout vzhled nehezké dlaždice.

Nezbývá než vyzkoušet! :)

Noise Texture Generator - CSS3 zdrojákoviště

Aplikaci naleznete na http://www.noisetexturegenerator.com/

A co vy, používáte nějaké další online generátory, které jsem nezmínil? Napište je do komentářů pod článek.


 

Všechny články v sekci
CSS3 zdrojákoviště
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
22 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity