Design CSS med denna Adobe-Style Web App Editor

Adobes programvara är världsberömd av designers i alla åldrar, men inte mer än Photoshop. PhotoShop redigeringspaneler är hela shebang med allt du behöver för att bygga egna design.

Och nu är det gratis webbappredigerare, kallad LayerStyles, som efterliknar Photoshop-lagredigeraren direkt i din webbläsare. Det låter dig dynamiskt generera CSS-kod som om du arbetar i Photoshop.

Om du besöker builder sida du kan tinker med det för att se hur det fungerar.

Fönstret kommer med fem olika stilpaneler som alla efterliknar Photoshop. De följer samma inställningar och de uppdatera omedelbart med en demo box på sidan.

Det här är de paneler du kan välja från:

1. Drop Shadow
2. Inre skugga
3. Bakgrund
4. Gräns
5. Border Radius

De mimar alla Adobe GUI som gör det här verktyget så roligt för designers. Du får också komplett CSS-kod, genereras gratis.

Klicka bara på den nedre vänstra hörnfältet märkt “CSS-kod” till hämta ditt kod. Den levereras med alla CSS3 egenskaper för allt du har valt.

Och det bästa av allt är det här projektet helt öppen källkod och gratis på GitHub om du vill ladda ner en lokal kopia. Inte bara kan detta vara roligt för genererar CSS, men det är också ett bra sätt att lära sig hur man bygger en webbapp.

Webbplatsen använder a massa av JavaScript-bibliotek, tillsammans med jQuery-plugins. Det byggdes av utvecklaren Felix Niklas som gjorde detta som ett sidprojekt.

Du kan hitta gott om kodgeneratorer någon annanstans men den här är verkligen unik. Det är också den roligaste och kanske den coolaste webbapp jag har sett hittills i år.

Ta en titt på LayerStyles och se vad du tycker. Du kan tinker med a levande version på demoversidan och hitta all tillgänglig källkod gratis på GitHub.

Eller om du vill sprida tack vare skaparen kan du tweeta dina beundranar @ mrflix.