20 + Vylepšení nástrojů a generátorů CSS3
CSS3 je vylepšená verze specifikace kaskádových stylů a přichází s mnoha okouzlujícími funkcemi, které přinášejí revoluci rozložení a designu webu, stejně jako další výhody.
Má však i některé nevýhody a řešení těchto problémů vyžaduje smutky. CSS3 je na trhu nový, takže je ještě hodně vylepšit.
Hlavní problém spočívá v tom, že vlastnosti jsou specifické pro prohlížeče a nemohou být snadno implementovány v různých prohlížečích. Vývojáři musí přidat další kód pro implementaci vlastností stejným způsobem v různých prohlížečích.
V tomto článku vyzdvihneme některé efektivní nástroje CSS3 s automatickým generátorem, které mohou vývojářům pomáhat - obzvlášť líné! - s velkým množstvím úkolů. Největší výhodou těchto nástrojů je to, že umožňují úplné přizpůsobení, což znamená, že je někdo může snadno použít.
1. CSS3, prosím!
CSS3, prosím je víceúčelový nástroj s všestrannými funkcemi border-radius , box-shadow a lineárních gradientů. Jedná se o on-line aplikaci, která zobrazuje okamžité výsledky v pravé části okna a pomáhá vývojářům vytvářet užitečný kód CSS3 ve více prohlížečích. CSS3, byl navržen Paul Irish a Jonathon Neal.
2. Generátor CSS3
Generátor CSS3 pomáhá vývojářům vytvářet úryvky v různých prohlížečích pro různé vlastnosti CSS3. Poskytuje vývojářům plnou funkci přizpůsobení, včetně border-radius , text-shadow , RGBa, velikost a velikost rámečku. Stačí kliknout na jednoduché rozbalovací menu a generovat kód pro požadovaný efekt.
3. Okraj poloměru
Poloměr hranice dělá vaše návrhy vypadat elegantněji s menším úsilím. Zadejte požadovanou hodnotu a vygeneruje kód pro obdélníky s různými specifikacemi hranic. Použijte jej, aby vaše vzory rozkošný.
4. CSS3 Maker
CSS3 Maker je úsporný nástroj, který je dodáván s rozbalovací nabídkou a různými dalšími možnostmi, včetně dimenzování boxů, voličů obrysů a transformátorů. Jednoduše zadejte požadované hodnoty do políček a generuje se kód spolu s náhledem. Kód je k dispozici ke stažení.
5. Tlačítko Maker
Chris Coyier představuje elegantní nástroj CSS-triky pro návrh stylových 3-D tlačítek. S Button Maker , jednoduše posuňte posuvníky tak, abyste nastavili horní a dolní přechody, barvu pozadí kurzoru, barvu textu a podobně, abyste získali požadované tlačítko v okamžiku.
6. CSS3 PIE
CSS3 PIE přichází s rychlou ukázkou a několika ovládacími prvky pro provádění několika vlastností CSS3, jako je například border-radius , box-shadow a lineárním gradientem. Přesunutím ovládacích prvků zobrazíte změny v přiloženém poli. Poté zaškrtněte políčko pro zobrazení pole CSS a zobrazení vygenerovaného kódu.
7. Widget Pad
Widget Pad mohou vylepšit funkce CSS3 zavedené v prohlížečích Webkit pomocí jednoduchého, ale efektivního automatického generátoru. Zahrnuje vlastnosti CSS, jako je opacita, zaoblené rohy, transformace a další.
8. CSS3 Gen
CSS3 Gen je užitečný nástroj pro začátečníky. Použijte ovládací prvky k vytvoření progresivního rozvržení: vytváření zaoblených rohů, přidávání efektů stínu k libovolnému prvku pole a přehrávání s efekty efektivního textu. Nástroj také pomáhá vývojářům specifikovat kompatibilitu kódu s prohlížeči.
9. Nabídka CSS3
Šikovné rozbalovací menu s mnoha interaktivními funkcemi je vzdálené jen pár kliknutí. Udělej svůj design vypadat elegantně Nabídka CSS3 . Zahrnuje zaoblené rohy, přechody a mnohem více. Nástroj zkracuje dobu kódování a získává stylové nabídky. Stačí stáhnout kód a vložit jej podle jeho požadavků.
10. Zaoblený rohový generátor
CSS Portal vytvořil všestranný nástroj pro generování kódu pro zaoblené rohy, díky nimž jsou rozvržení webu vyjímečné. The Zaoblený rohový generátor usnadňuje generování vlastního kódu pro všechny rohy v jednom kroku nebo rohu za rohem.
11. Graf kliknutí CSS3
CSS3 Graf kliknutí pomáhá s velkými efekty, jako jsou barvy RGBa, stínění boxů, radiální přechody a rotace. Vývojáři mohou upravovat velikost pozadí a dát úžasný efekt mrtvice. Nástroj však nemá mnoho flexibilních možností pro přizpůsobení kódu. Přesto je to efektivní auto-generátor, který vám ušetří čas.
12. Testování výběru CSS3
CSS3 Selector Test je kompletní testovací sada, která automaticky generuje různé malé testy, aby vyhodnotila, zda je prohlížeč kompatibilní s voliči CSS. Pokud zjistí problém kompatibility, označí jej. Ale vzhledem k technickým omezením se s uživatelsky závislými selektory příliš nezajímá.
13. Generátor přechodu
Barvy mohou dramaticky změnit design. Generátor přechodu umožňuje navrhnout tříbarevný gradient za sekundu. Stačí vybrat barvy pro začátek, přechod a konec. Následně generuje gradient, přičemž barvy jsou rozloženy rovnoměrně od sebe. Chyť kód a jdi.
14. Border-image-generator
Border-image-generátor je vzrušující nástroj CSS3, který můžete použít k vygenerování chladných rámečků úpravou posuvníků. Získejte okamžitý kód pro border-radius vlastnictví. Vyberte libovolný obrázek a použijte ho ke stylování pozadí a ohraničení zadaného prvku a udělejte designu ohromující vzhled.
15. Westciv
Westciv je nezbytnou záložkou kolekce nástrojů. Pomocí nástroje XRAY zobrazte polohu, okraje, polstrování a mnoho dalších podrobností o jakémkoli prvku. MRI pomáhá vygenerovat nejlepší selektory pro konkrétní prvek. Sandbox CSS3 obsahuje přechody, stíny a transformace CSS. A ještě se říká, že další budou brzy.
16. Xeo CSS
Xeo CSS je interaktivní nástroj s desktopovou zkušeností. Pomáhá vývojářům a začátečníkům navrhnout stránky CSS a HTML bez psaní jediného řádku kódu. Vytváří nejen úryvky CSS3, ale i třídy a selektory ID. Celkově je to skvělý nástroj. Zaregistrujte se a začněte navrhnout mimořádné rozvržení webu.
17. CSS rohy
CSS rohy umožňuje vytvářet zaoblené rohy s přechody, aby váš návrh profesionální vzhled. Kód zaoblených rohů podporuje mnoho prohlížečů. Vše, co musíte udělat, je použít ovládací prvky spolu s malou náhledu a získat kód.
18. CSS3 Gradient Button Generator
Tlačítka mohou design vypadat elegantně - ale pokud nejsou navrženy dobře, mohou zničit celé uspořádání. Vytvořte cool tlačítka přidáním přechodů a stínů. CSS3 Gradient Button Generator generuje příslušný kód za pár vteřin a nabízí řadu ovládacích prvků, včetně gradientu, textu a efektů vznášení.
19. Spritebox
Spritebox je nástroj WYSIWYG ("to, co vidíte, je to, co dostanete"), což pomáhá vývojářům vytvářet třídy CSS a ID z jediného obrazu sprite. Možnost drag-and-drop činí tento nástroj příjemně interaktivní. Spritebox podporuje mnoho prohlížečů, takže problémy s kompatibilitou lze rychle vyřešit. Vyberte libovolnou část obrázku, kterou lze načíst z libovolné adresy URL nebo nahrát z počítače, a definovat název třídy. Nástroj automaticky vytvoří pravidla CSS pro pozici pozadí.
20. Gradient Editor
Dejte svému designu barevný, ale kompromisní vzhled s funkcemi Adobe podobnými Gradient Editor . Navrhněte průhledné gradienty CSS a přidejte fade-in, fade-out, semi-transparentnost a podobné efekty, abyste získali barevné gradientové tlačítko.
21. CSS3 hřiště Mike Plate
Mike Plate (webový a mobilní vývojář) představuje neuvěřitelný online nástroj, CSS3 hřiště , což usnadňuje vývoj různých funkcí, včetně textových stínů, transformací a gradientních pozadí. Tento úžasný nástroj má také možnost změny velikosti a přeměny, s výběrem barev a posuvníky, které vám mohou pomoci vytvořit styly textového pole. Po provedení úpravy se okamžitě objeví náhled s vygenerovaným kódem.
Závěr
S funkcí CSS3 můžete dělat zázraky s rozvržením webu. Ale člověk potřebuje technické dovednosti. Zde najdete užitečné nástroje, které vám pomohou profesionálům, kteří si přejí vytvářet co nejvíce kódů kompatibilních s prohlížečem pro různé vlastnosti CSS3 a pomohou také těm, kteří jsou v oblasti designu noví.
Něco, co nám chybí? Na kterých nástrojích CSS3 se nejvíce spoléháte?