Online generátory CSS stylů pro moderní webmastery

HTML a CSS Profesionální webdesign 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

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

Tlačítkovač

Nastavte výšku, šířku, zaoblení, stín ... toto všechno a mnohem více vám dovolí další další aplikace od Drahoše, ve které si můžete v rychlosti světla vytvořit nádherná tlačítka.

Aplikace vám vygeneruje CSS kód, takže se o nic nemusíte dále starat.

CSS 3 tlačítkovač

Aplikaci naleznete na http://www.itnetwork.cz/…on-generator

Stripemania

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 Stripemania, 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!

Stripemania

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

Color Scheme Designer

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í :)

Color scheme designer

Aplikaci naleznete na http://colorschemedesigner.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

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

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 kompletně zdarma, což je prostě prima. Font obsahuje celkově 302 ikonek. 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é !

Ba co víc, je tu i podpora pro Internet Explorer 7!

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

Font awesome

Aplikaci naleznete na http://fortawesome.github.io/Font-Awesome/

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

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.


 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (20 hlasů) :
4.44.44.44.4 4.4


 


Miniatura
Předchozí článek
Galerie CSS 3 tlačítek
Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Základní tvary v CSS 3

 

 

Komentáře
Zobrazit starší komentáře (9)

Avatar
-snaživec-
Člen
Avatar
-snaživec-:

stiahol som si font a neviem ako ho mám dať na stránku, poradíte mi?

Odpovědět 12.4.2014 19:32
Pomali ďalej zájdeš.
Avatar
Ondrca
Redaktor
Avatar
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Super! Hned ten první program se mi hodí! Na ty odstíny! AspoNˇsi nemusím třeba pamatovat #666666 :D.

 
Odpovědět 17.5.2015 21:49
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Škoda :(. Já myslel že jsou ty programy ke stažení. Jdou někde tyhle programy stáhnout?

 
Odpovědět  +1 17.5.2015 21:52
Avatar
Odpovídá na vojtanosek
Michal Žůrek (misaz):

Nějak nechápu proč bys to chtěl stahovat?

Odpovědět  +3 18.5.2015 14:14
Nesnáším {}, proto se jim vyhýbám.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Bylo by to lepší :).

 
Odpovědět  -5 18.5.2015 14:17
Avatar
Odpovídá na vojtanosek
Petr Čech (czubehead):

Tak teoreticky si můžeš uložit tu stránku z prohlížeče (pravym>uložit jako) , ale také moc nevidím smysl.

Odpovědět  +1 19.5.2015 7:48
Why so serious? -Joker
Avatar
Petr Petrov
Člen
Avatar
Petr Petrov:

Nevíte někdo prosím, jaký program je nejlepší k vytvoření lesklé barvy?

 
Odpovědět 4. října 22:30
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Petr Petrov
Jiří Gracík:

Co si představuješ pod pojmem lesklá barva?

Odpovědět  +2 5. října 1:17
Creating websites is awesome till you see the result in another browser ...
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Petr Petrov
krepsy3:

Barev máš pouze "omezené množství" - konkrétně od #000000 do #ffffff, což je hexadecimální zápis který pak použiješ k deklaraci v pravidlu. To, že má něco "lesklý efekt", je uděláno pomocí stylování. Druhá varianta je použití CSS funkce rgba, ta má čtyři číselné parametry

rgba(red, green, blue, alpha)

Za red, green a blue dosadíš čísla od 0 do 255 - kolik které barevné složky tam chceš.
Za alpha dosadíš hodnotu od 0 do 1 - jak moc má být barva průhledná.

Pokud hledáš efekt odlesku, tak to se dělá za pomoci gradientního přechodu barev - generátor nalezneš např. zde

Odpovědět  +1 5. října 9:32
Programátor je stroj k převodu kávy na kód.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 19. Zobrazit vše