Design CSS med denne Adobe-Style Web App Editor
Adobes programvare er verdenskjent av designere i alle aldre, men ikke mer enn Photoshop. PhotoShop redigeringspaneler er hele shebang med alt du trenger for å bygge egendefinerte design.
Og nå er det gratis webappredaktør, kalt LayerStyles, som etterligner Photoshop-lagredigeringsprogrammet rett i nettleseren din. Det lar deg dynamisk generere CSS-kode som om du jobber i Photoshop.
Hvis du besøker builder side du kan tinker med det for å se hvordan det fungerer.
Vinduet kommer med Fem forskjellige stilpaneler som alle etterligner Photoshop. De følger de samme innstillingene og de oppdater umiddelbart med en demo boks på siden.
Dette er panelene du kan velge fra:
- Drop Shadow
- Indre skygge
- Bakgrunn
- Grense
- Border Radius
De alle etterligner Adobe GUI som gjør dette verktøyet så gøy for designere. Du får også fullfør CSS-koden, generert gratis.
Bare klikk på den nederste venstre hjørneboksen merket “CSS-kode” til få koden din. Den leveres med alle CSS3 egenskaper for alt du har valgt.
Og det beste av alt, dette prosjektet er helt åpen kildekode og gratis på GitHub hvis du vil laste ned en lokal kopi. Ikke bare kan dette være gøy for genererer CSS, men det er også en fin måte å lære på hvordan å bygge en web-app.
Nettstedet bruker en mye av JavaScript-biblioteker, sammen med jQuery plugins. Det ble bygd av utvikler Felix Niklas som gjorde dette som et sideprosjekt.
Du kan finne masse kodegeneratorer andre steder, men dette er virkelig unikt. Det er også den mest morsomme og kanskje den kuleste web-appen jeg har sett så langt i år.
Ta en titt på LayerStyles og se hva du synes. Du kan tinker med a live versjon på demoversiden og finn all tilgjengelig kildekoden gratis på GitHub.
Eller, hvis du vil spre takket være skaperen, kan du tweet beundringene dine @mrflix.
