Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

Online generátory CSS stylů pro moderní webmastery

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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.


 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
22 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Předchozí článek
Galerie CSS 3 tlačítek
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Základní tvary v CSS 3
Aktivity (1)

 

 

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

Avatar
Michal Žůrek - misaz:18.5.2015 14:14

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

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

Bylo by to lepší :).

 
Odpovědět  -5 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  +1 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  +3 5.10.2016 1:17
Neaktivní uživatelský účet
Avatar
krepsy3
Redaktor
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  +1 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. března 13:21

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

 
Odpovědět 10. března 13:21
Avatar
Honza Bittner
Šupák
Avatar
Odpovědět 10. března 14:34
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Radek Čief
Člen
Avatar
 
Odpovědět 10. března 14:46
Avatar
Niesomtu Hraskova:28. dubna 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. dubna 16:58
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 23. Zobrazit vše