Ontwerp CSS met deze Adobe-Style Web App Editor

Adobe's software is wereldwijd bekend door ontwerpers van alle leeftijden, maar niets meer dan Photoshop. Bewerkingspanels voor PhotoShop zijn de hele shebang met alles wat je nodig hebt om aangepaste ontwerpen te maken.

En nu is er een gratis web app-editor, riep LayerStyles, die de Photoshop-lageneditor in uw browser nabootst. Het laat je dynamisch CSS-code genereren alsof je in Photoshop werkt.

Als u de bouwer pagina je kunt ermee sleutelen om te zien hoe het werkt.

Het venster wordt geleverd met vijf verschillende stijlpanelen die allemaal lijken op Photoshop. Ze volgen dezelfde instellingen en zij update onmiddellijk met een demovak op de pagina.

Dit zijn de panelen waaruit je kunt kiezen:

1. Slagschaduw
2. Innerlijke schaduw
3. Achtergrond
4. Grens
5. Grensradius

Ze bootsen allemaal de Adobe GUI na die deze tool zo leuk maakt voor ontwerpers. Je krijgt ook de complete CSS-code, gratis gegenereerd.

Klik gewoon op het vak met de tekst linksonder “CSS-code” naar pak je snippet. Het wordt geleverd met alle CSS3-eigenschappen voor alles wat je hebt geselecteerd.

En het beste van alles is dat dit project volledig is open source en gratis op GitHub als u een lokale kopie wilt downloaden. Dit kan niet alleen leuk zijn voor genereren van CSS, maar het is ook een geweldige manier om te leren hoe een web-app te bouwen.

De site gebruikt een lot van JavaScript-bibliotheken, samen met jQuery-plug-ins. Het werd gebouwd door ontwikkelaar Felix Niklas die dit als bijproject maakte.

Je kunt vinden veel code generatoren elders, maar deze is echt uniek. Het is ook de leukste en misschien wel de coolste web-app die ik tot nu toe dit jaar heb gezien.

Bekijk LayerStyles en zie wat je ervan vindt. Je kunt sleutelen aan a live versie op de demopagina en vind alle beschikbare broncode gratis op GitHub.

Of, als je het wilt verspreiden dankzij de maker, kun je je bewondering tweet @mrflix.