20+ bezplatných generátorů kódu CSS3
Jedním z největších problémů se všemi novými vlastnostmi CSS3 je to, že většina z nich má několik implementací specifických pro prohlížeč. To znamená, že pokud chcete jednoduchý stín, musíte si pamatovat docela dost kódu, aby byl kompatibilní v co největším počtu prohlížečů.
Abychom vám pomohli s touto úlohou, vytvořila skupina intrepidových kodérů zdarma interaktivní nástroje, které poskytují jednoduchá uživatelská rozhraní, která vyplivují veškerý kód, který potřebujete, s plně přizpůsobitelným konečným výsledkem. Níže najdete více než dvacet z těchto generátorů CSS3.
Prozkoumejte zdroje návrhu
Generátor CSS3
Rozhodně jedna z nejpopulárnějších možností. Všechny efekty jsou plně přizpůsobitelné a můžete si vybrat ze všech oblíbených vlastností CSS3.
![](http://computer06.com/img/css/412/20-free-css3-code-generators.jpg)
CSS3 Prosím
Další opravdu populární možnost, tato vám umožňuje upravovat kód stejně, jako byste ho viděli v editoru kódu. Změny se projeví na obrázku vpravo nahoře.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-2.jpg)
CSS3 Klikněte na graf podle působivých webů
Není příliš přizpůsobitelný (stačí kliknout pro zobrazení kódu), ale pravděpodobně nejpřesnější v seznamu, pokud jde o počet zahrnutých efektů.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-3.jpg)
Tvůrce tlačítek CSS-Tricks
Vynikající výrobce knoflíků z internetu wiz Chris Coyier. Pomocí posuvníků změňte vlastnosti.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-4.jpg)
Hraniční poloměr
Jedna z elegantnějších možností nastavení poloměru ohraničení. Stačí zadat jediné číslo a zbytek.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-5.jpg)
Generátor písma Squirrel @ Font-Face
Toto je zdaleka můj oblíbený nástroj na seznamu. Nahrajte písmo a tím se vyplivne vše, co potřebujete k jeho vložení na web, včetně formátů souborů HTML, CSS a více fontů. Určitě budete chtít záložku tohoto!
![](http://computer06.com/img/css/412/20-free-css3-code-generators-6.jpg)
Westciv
Westciv má řadu užitečných generátorů CSS3, které jsou zdarma a snadno se používají. Zkontrolujte je níže.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-7.jpg)
- Přechody CSS3
- Textové stíny CSS3
- Transformace CSS3
- Tah textu CSS3
- Radiální přechody CSS3
- Stíny CSS3
Generátor přechodu CSS3
Pomocí několika jednoduchých rozevíracích nabídek a posuvníku můžete vytvořit složité přechody.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-8.jpg)
Generátor Widgetpad CSS3
Další s několika vlastnostmi a efekty z čeho vybírat.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-9.jpg)
Hraniční obrázek
Border-image je poměrně komplikovaná nová funkce CSS3. Pomocí tohoto nástroje zjistěte, jak to všechno funguje.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-10.jpg)
Generátor tlačítka ikon
Úžasný generátor tlačítek s množstvím možností.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-11.jpg)
Rohy CSS
Tento v současné době zpracovává přechody a zaoblené rohy a slibuje další možnosti na cestě brzy.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-12.jpg)
CSS3 Maker
Super úhledný a snadno použitelný, tento zvládne celkem několik triků CSS.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-13.jpg)
Generátor zaoblených rohů CSS3
Další základní generátor zaoblených rohů.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-14.jpg)
Generátor menu CSS3
Toto je vlastně plnohodnotná aplikace ke stažení pro vytváření složitých nabídek CSS3 se zaoblenými rohy, přechody a dalšími.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-15.jpg)
Generátor sloupců CSS3
Jeden z mála generátorů sloupců, které jsem našel (generátor CSS3 také dělá sloupce). Tento není v angličtině, ale je stále dost lehký na to, aby zjistil, a kód, který vyplivne, je samozřejmě plně čitelný.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-16.jpg)
Rychlý tříbarevný generátor přechodu CSS3
Jeden poslední generátor gradientů CSS, jen v případě, že 10 nebo více výše nesplňuje vaši touhu po gradientu.
![](http://computer06.com/img/css/412/20-free-css3-code-generators-17.jpg)
Závěr
Doufám, že vám výše uvedené nástroje pomohou naučit se být mistrem CSS3. Pro ještě více dobrot CSS3 se podívejte na CSS-Infos a CSS3 Pie. CSS-Infos je obrovský seznam vlastností CSS spolu s tím, co prohlížeče podporují, a CSS3 Pie je zdrojem pro získání dobrého starého IE pro správné zobrazení CSS3.
Zanechte komentář níže a dejte nám vědět, jaké jsou vaše oblíbené generátory CSS a pokud jsme něco vynechali.