Office week Slevový týden - Květen
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

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

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
22 hlasů
Student FIT ČVUT. In love with Dart & Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Všechny články v sekci
Profesionální webdesign v CSS 3
Aktivity (2)

 

 

Komentáře

Avatar
Cabernet
Člen
Avatar
Cabernet:17.6.2013 19:13

http://www.colourco.de/ je tiež zaujímavá stránka

Odpovědět
17.6.2013 19:13
Think different
Avatar
Vojtěch Jelínek (Slepice1):17.6.2013 19:28

http://subtlepatterns.com/ Opravdu pěkné pozadí.

 
Odpovědět
17.6.2013 19:28
Avatar
Michal Žůrek - misaz:17.6.2013 19:41

mě ti ten tvůj článek připadá takový "uřvaný", ale jinak je pěkný.

Generátory jsou na kde co. Když chceš něco generovat, zajdi na google, ten ti vygeneruje výsledky hledání generátorů. :D

 
Odpovědět
17.6.2013 19:41
Avatar
Neaktivní uživatel:17.6.2013 19:48
Co víc si přát, než stránku plnou bezplatných písem?

Za to bych ti urazil hlavu :D Až mi budou chodit domů krabice se "sedmičkama" tak si nechám k sobě natáhnout optiku a pak budu milerád prohlížet weby plné bezplatných písem. Ale dokud budu bydlet na vesnici, tak asi ne :D

Odpovědět
17.6.2013 19:48
Neaktivní uživatelský účet
Avatar
Honza Bittner
Šupák
Avatar
Odpovědět
17.6.2013 22:08
Student FIT ČVUT. In love with Dart &...
Avatar
Ben Žour
Redaktor
Avatar
Ben Žour:19.6.2013 9:19

Na fonty používám spíš googlácký http://www.google.com/fonts/, nejsem nějak extra na fonty náročnej takže si vystačím :-) Jinak pěkný článek.

 
Odpovědět
19.6.2013 9:19
Avatar
Snorlax
Redaktor
Avatar
Snorlax:20.6.2013 16:39

Tak tipuju že ty fonty jsou bez diakritiky. to je pak k ničemu... :(

Odpovědět
20.6.2013 16:39
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Snorlax
Honza Bittner:20.6.2013 16:51

Záleží na autorech fontu jestli udělají podporu ... :)

Většinou však mají ty lepší fonty co nejvíce znaků :)

Odpovědět
20.6.2013 16:51
Student FIT ČVUT. In love with Dart &...
Avatar
Petr Gürth
Redaktor
Avatar
Petr Gürth:6.8.2013 17:23

Nedávno jsem narazil na skvělý generátor pozadí. :)
http://bg.siteorigin.com

 
Odpovědět
6.8.2013 17:23
Avatar
-snaživec-
Člen
Avatar
-snaživec-:12.4.2014 19:32

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
Odpovědět
12.4.2014 19:33
Zase jsem o něco chytřejší
Avatar
vojtanosek
Člen
Avatar
vojtanosek:17.5.2015 21:49

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
vojtanosek
Člen
Avatar
vojtanosek:17.5.2015 21:52

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

 
Odpovědět
17.5.2015 21:52
Avatar
Odpovídá na vojtanosek
Michal Žůrek - misaz:18.5.2015 14:14

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

 
Odpovědět
18.5.2015 14:14
Avatar
vojtanosek
Člen
Avatar
vojtanosek:18.5.2015 14:17

Bylo by to lepší :).

 
Odpovědět
18.5.2015 14:17
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na vojtanosek
Petr Čech:19.5.2015 7:48

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
19.5.2015 7:48
the cake is a lie
Avatar
Petr Petrov
Člen
Avatar
Petr Petrov:4.10.2016 22:30

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

 
Odpovědět
4.10.2016 22:30
Avatar
Odpovídá na Petr Petrov
Neaktivní uživatel:5.10.2016 1:17

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

Odpovědět
5.10.2016 1:17
Neaktivní uživatelský účet
Avatar
krepsy3
Editor
Avatar
Odpovídá na Petr Petrov
krepsy3:5.10.2016 9:32

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
5.10.2016 9:32
Programátor je stroj k převodu kávy na kód.
Avatar
Radek Čief
Člen
Avatar
Radek Čief:10.3.2019 13:21

Chtěl bych se zeptat, Stripemania už nefunguje, je něco podobného ?

 
Odpovědět
10.3.2019 13:21
Avatar
Honza Bittner
Šupák
Avatar
Odpovědět
10.3.2019 14:34
Student FIT ČVUT. In love with Dart &...
Avatar
Radek Čief
Člen
Avatar
 
Odpovědět
10.3.2019 14:46
Avatar
Niesomtu Hraskova:28.4.2019 16:58

STRIPEMANIA by sa teda zisla editovat s inym anchor odkazom. To je zatial to jediné čo mi na tejto inak skutočne úžastnej stránke vadí. teda: NEAKTUÁLNOST niektorých podstatných maličkostí v článkoch či kurzoch. Čudujem sa, že autor toho ktorého článku/kurzu si sám priebežne nekontroluje a needituje aktuálnosť svojich (vačšinou odkazov) článkov. Alebo že to neopraví aspoň vtedy, ked je na to v komentaroch upozornený. NAVRHUJEM VYLEPŠENIE V PODOBE TLAČÍTKA HNED POD CLANKOM (alebo to moze byt v spojeni s form na upresnenie neaktualnej casti) KTORÝM BY SA DAL LAHKO UPOZORNIT AUTOR CLANKU S PROSBOU O OPRAVU S PODMIENKOU ZE AK BY TAKETO UPOZORNENIE BOLO ODOSLANE NAPR. PO UBEHNUTI MESIACA ZNOVU NA ROVNAKY CLANOK (teda po mesiaci nedoslo k aktualizacii clanku) TAK BY SA TOTO UPOZORNENIE NEPOSLALO UZ IBA AUTOROVI CLANKU ALE AJ LUDOM KTORÍ TENTO WEB VYTVÁRAJU A STARAJÚ SA O NEHO ABY SAMI SKUSILI KONTAKTOVAT AUTORA ALEBO JEDNODUCHO OPRAVILI (ak je to mozne) NEAUKTUALNU CAST (odkaz). ČI? :))

Odpovědět
28.4.2019 16:58
Hľadám si prácu, tak mi smelo napíš mail.
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 23 zpráv z 23.