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. PhotoShop-bewerkingspanelen zijn de hele puzzel met alles wat u nodig hebt om aangepaste ontwerpen te maken.

En nu is er een gratis webappeditor, LayerStyles genaamd, die de Photoshop- lageneditor in uw browser nabootst. Hiermee kunt u CSS-code dynamisch genereren alsof u in Photoshop werkt.

Als u de builderpagina bezoekt, kunt u ermee sleutelen om te zien hoe het werkt.

Het venster wordt geleverd met vijf verschillende stijlpanelen die allemaal op Photoshop lijken. Ze volgen dezelfde instellingen en ze worden onmiddellijk bijgewerkt 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 volledige CSS-code die gratis wordt gegenereerd.

Klik gewoon op het vak in de linker benedenhoek met het label "CSS-code" om uw fragment te krijgen . Het wordt geleverd met alle CSS3-eigenschappen voor alles wat je hebt geselecteerd.

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

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

Je kunt elders veel code-generators vinden, 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 een live-versie op de demopagina en alle beschikbare broncode gratis vinden op GitHub.

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