CSS3 er en forbedret version af Cascading Style Sheets specifikationen, og den kommer med mange fortryllende funktioner, der revolutionerer weblayout og design samt andre fordele.

Men det har også nogle ulemper, og det kræver smarts at tackle dem. CSS3 er nyt på markedet, så der er stadig meget at forbedre.

Det største problem er, at egenskaberne er browserspecifikke og ikke let kan implementeres på tværs af browsere. Udviklere skal tilføje ekstra kode for at implementere egenskaberne på samme måde på tværs af browsere.

I denne artikel vil vi fremhæve nogle effektive CSS3-generatoraggregater, der kan hjælpe udviklere - især dovne! - med mange opgaver. Den største fordel ved disse værktøjer er, at de giver mulighed for fuld tilpasning, hvilket betyder, at alle kan bruge dem med lethed.

1. CSS3, tak!

CSS3, tak er et multifunktionsværktøj med alsidige funktioner som border-radius , box-shadow og lineære gradienter. Det er en online-applikation, der viser øjeblikkelige resultater på højre side af vinduet, og hjælper udviklere med at oprette nyttige CSS3-kode i en browser. CSS3, venligst var designet af Paul Irish og Jonathon Neal.

2. CSS3 Generator

CSS3 Generator Hjælper udviklere til at generere kryds-browser-uddrag til forskellige CSS3-egenskaber. Det giver udviklere fuld tilpasningsfunktionalitet, herunder border-radius , text-shadow , RGBa, boks størrelse og boks størrelse størrelse. Bare klik på den enkle rullemenu og generer koden for den ønskede effekt.

3. Border Radius

Border Radius gør dine designs mere elegante med mindre indsats. Indtast den ønskede værdi, og den vil generere kode til rektangler med forskellige grænsespecifikationer. Brug det til at gøre dine designs bedårende.

4. CSS3 Maker

CSS3 Maker er et sparsommeligt værktøj, der leveres med en rullemenu og forskellige andre muligheder, herunder boks størrelse, omrids selektorer og transformere. Indtast kun de ønskede værdier i felterne, og koden er genereret sammen med et eksempel. Koden er tilgængelig til download.

5. Button Maker

Chris Coyier præsenterer et elegant værktøj på CSS-Tricks til design af stilfulde 3-D knapper. Med Button Maker , flyt simpelthen skyderne for at justere top- og bundgradienterne, sving baggrundsfarve, svingtekstfarven og så videre for at få den ønskede knap på ingen tid.

6. CSS3 PIE

CSS3 PIE leveres med en hurtig demo og nogle kontroller til at udføre nogle få CSS3 egenskaber, f.eks border-radius , box-shadow og lineær gradient. Flyt kontrollerne for at se ændringerne i den medfølgende boks. Marker derefter afkrydsningsfeltet for at vise CSS-boksen og se den genererede kode.

7. Widget Pad

Widget Pad kan forbedre CSS3-mulighederne, der introduceres i Webkit-browsere med en simpel, men effektiv auto-generator. Det dækker CSS egenskaber såsom opacitet, afrundede hjørner, transformer og meget mere.

8. CSS3 Gen

CSS3 Gen er et praktisk værktøj til nybegynderudviklere. Brug kontrollerne til at gøre et progressivt layout: Opret afrundede hjørner, tilføj skyggeeffekter til ethvert feltelement og spil med kølige teksteffekter. Værktøjet hjælper også udviklere ved at angive kodeens kompatibilitet med browsere.

9. CSS3 Menu

En smuk rullemenu med mange interaktive funktioner er blot et par klik væk. Gør dit design ser elegant ud med CSS3 Menu . Det dækker afrundede hjørner, gradienter og meget mere. Værktøjet reducerer kodningstiden for at få stilfulde menuer. Bare download koden og indlejre den i henhold til dens krav.

10. Afrundet Hjørne Generator

CSS Portal har skabt et alsidigt værktøj til generering af kode til afrundede hjørner, hvilket gør weblayouts ser klassiske ud. Det Afrundet Hjørne Generator gør det nemt at generere brugerdefineret kode til alle hjørner i en tur eller et hjørne ved hjørnet.

11. CSS3 Click Chart

CSS3 Click Chart hjælper med store effekter som RGBa farver, boks skygger, radiale gradienter og rotation. Udviklere kan tilpasse baggrundsstørrelser og give tekst fantastiske strejkeeffekter. Værktøjet har imidlertid ikke mange fleksible muligheder for at tilpasse kode. Alligevel er det en effektiv auto-generator, der kan spare tid.

12. CSS3 selektortest

CSS3 selektortest er en komplet testpakke, der automatisk genererer forskellige små test for at vurdere, om en browser er kompatibel med CSS-selektorer. Hvis det registrerer et kompatibilitetsproblem, markerer det det. Men det går ikke godt ud med brugerafhængige selektorer på grund af tekniske begrænsninger.

13. Gradient Generator

Farver kan ændre et design dramatisk. Gradient Generator giver dig mulighed for at designe en trefarvet gradient på et sekund. Vælg bare begyndelses-, overgangs- og slutfarver. Det genererer så gradienten, med farverne fordelt lige ud af hinanden. Grib koden og gå.

14. Border-image-generator

Border-image-generator er et spændende CSS3-værktøj, som du kan bruge til at generere kølige billeder ved at justere skydere. Få øjeblikkelig kode til border-radius ejendom. Vælg et billede og brug det til at indstille baggrunden og grænsen for et bestemt element, og giv dit design et fantastisk udseende.

15. Westciv

Westciv er et must-bogmærke samling af værktøjer. Brug XRAY til at se position, margener, polstring og mange flere detaljer om ethvert element. MR hjælper dig med at generere de bedst mulige selektorer til et bestemt element. CSS3 Sandbox indeholder gradienter, skygger og CSS transformationer. Og stadig andre siges at komme snart.

16. Xeo CSS

Xeo CSS er et interaktivt værktøj med en desktop-lignende oplevelse. Det hjælper udviklere og begyndere med at designe CSS og HTML-sider uden at skrive en enkelt kode kode. Det genererer ikke kun CSS3 uddrag, men klasser og ID selektorer. Alt i alt er det et godt værktøj. Registrer og start med at designe et ekstraordinært weblayout.

17. CSS hjørner

CSS hjørner giver dig mulighed for at skabe afrundede hjørner med gradienter for at give dit design et professionelt udseende. Den afrundede hjørner kode understøttes af mange browsere. Alt du skal gøre er at bruge kontrollerne sammen med den lille preview-funktion og få koden.

18. CSS3 Gradient Button Generator

Knapper kan gøre et design ser elegant ud, men hvis de ikke er designet godt, kan de ødelægge hele layoutet. Opret kølige knapper ved at tilføje gradienter og skygger. CSS3 Gradient Button Generator genererer den relevante kode inden for få sekunder og tilbyder en række forskellige kontroller, herunder gradient-, tekst- og svæveffekter.

19. Spritebox

Spritebox er et WYSIWYG-værktøj ("hvad du ser, er hvad du får"), der hjælper udviklere med at oprette CSS-klasser og id'er fra et enkelt spritbillede. Træk-og-slip-indstillingen gør dette værktøj behageligt interaktivt. Spritebox understøtter mange browsere, så kompatibilitetsproblemer kan løses hurtigt. Vælg hvilken som helst del af et billede, som kan hentes fra en hvilken som helst webadresse eller uploades fra en computer, og definer klassenavnet. Værktøjet opretter automatisk CSS-regler for baggrundspositionen.

20. Gradient Editor

Giv dit design et farverigt, men alligevel sammensat look med de Adobe-lignende funktioner i Gradient Editor . Design gennemsigtige CSS-gradienter og tilføj fade-in, fade-out, semi-gennemsigtighed og lignende effekter for at få en farverig gradientknap.

21. Mike Plates CSS3 Legeplads

Mike Plate (en web- og mobiludvikler) præsenterer et utrolig online værktøj, CSS3 Legeplads , som letter udviklingen af ​​en række funktioner, herunder tekstskygger, transformer og gradientbakgrunde. Dette fantastiske værktøj har også en størrelses- og repositioneringsmulighed med farvevælger og skydere, der kan hjælpe dig med at skrive en tekstboks. Når ændringen er færdig, vises previewen med den genererede kode øjeblikkeligt.

Konklusion

Med CSS3 kan man lave underværker med weblayout. Men man har brug for teknisk færdighed. De praktiske værktøjer, der er angivet her, vil yde stor hjælp til fagfolk, der ønsker at generere så meget browser-kompatibel kode som muligt for forskellige CSS3-egenskaber, og de vil også hjælpe dem, der er nye til designfeltet.

Noget vi har savnet? Hvilke CSS3-værktøjer er du mest afhængige af?