Design CSS med denne Adobe-Style Web App Editor
Adobes software er verdensberømt af designere i alle aldre, men ikke mere end Photoshop. PhotoShop redigeringspaneler er hele shebang med alt hvad du behøver for at opbygge brugerdefinerede designs.
Og nu er der gratis webapp editor, hedder LayerStyles, som efterligner Photoshop-lagreditoren lige i din browser. Det lader dig dynamisk generere CSS kode som om du arbejder i Photoshop.
Hvis du besøger builder side Du kan tinker med det for at se, hvordan det virker.
Vinduet kommer med fem forskellige stilpaneler at alle efterligner Photoshop. De følger de samme indstillinger og de opdater straks med en demo boks på siden.
Dette er de paneler du kan vælge fra:
- Drop Shadow
- Indre skygge
- Baggrund
- Grænse
- Border Radius
De alle efterligner Adobe GUI, som gør dette værktøj så sjovt for designere. Du får også den komplet CSS-kode, genereret gratis.
Bare klik på den nederste venstre hjørne boks mærket “CSS-kode” til få dit uddrag. Det leveres med alle CSS3 egenskaber til alt, hvad du har valgt.
Og det bedste af alt er dette projekt helt open source og gratis på GitHub, hvis du vil downloade en lokal kopi. Dette kan ikke kun være sjovt for genererer CSS, men det er også en god måde at lære hvordan man opbygger en webapp.
Siden anvender en masse af JavaScript-biblioteker, sammen med jQuery-plugins. Det blev bygget af bygherrer Felix Niklas, der lavede dette som et sideprojekt.
Du kan finde masser af kodegeneratorer andre steder, men denne er virkelig unik. Det er også den mest sjove og måske den fedeste web-app jeg har set indtil videre i år.
Tag et kig på LayerStyles og se, hvad du synes. Du kan tinker med a live version på demoversiden og find alle tilgængelige kildekoder gratis på GitHub.
Eller hvis du vil sprede takket være skaberen, kan du tweet dine beundringer @ mrflix.
