Suunnittele CSS tämän Adobe-tyylisen Web-sovelluseditorin avulla

Adobe-ohjelmisto on maailmankuulu kaikenikäisille suunnittelijoille, mutta ei kukaan enempää kuin Photoshop. PhotoShop-muokkauspaneelit ovat koko shebang, jossa on kaikki mitä tarvitset mukautettujen mallien rakentamiseen.

Ja nyt on vapaa Web-sovellusten muokkausohjelma, olla nimeltään LayerStyles, joka jäljittelee Photoshop-kerrosten editoria suoraan selaimessasi. Sen avulla voit tuottaa dynaamisesti CSS-koodin ikään kuin työskentelet Photoshopissa.

Jos käyt rakentajan sivu voit peittää sitä nähdäksesi, miten se toimii.

Ikkuna tulee viisi eri tyyliä että kaikki jäljittelevät Photoshopia. He seuraavat samoja asetuksia ja ne päivittää välittömästi demo-ruutuun.

Nämä ovat paneeleja, jotka voit valita seuraavista:

1. Pudota varjo
2. Sisäinen varjo
3. Tausta
4. reunus
5. Rajan säde

Ne kaikki jäljittelevät Adobe GUI: ta, joka tekee tästä työkalusta niin hauskaa suunnittelijoille. Saat myös täydellinen CSS-koodi, luotu ilmaiseksi.

Napsauta vain vasemmassa alakulmassa olevaa ruutua “CSS-koodi” että saat katkelman. Sen mukana toimitetaan kaikki CSS3-ominaisuudet, jotka olet valinnut.

Ja mikä parasta, tämä projekti on täysin avoimen lähdekoodin ja ilmaisen GitHubissa, jos haluat ladata paikallisen kopion. Tämä ei ole vain hauskaa tuottaa CSS, mutta se on myös hyvä tapa oppia miten web-sovellus voidaan rakentaa.

Sivusto käyttää a erä of JavaScript-kirjastot, kera jQuery-laajennukset. Sen rakensi kehittäjä Felix Niklas, joka teki tämän sivuprojektiksi.

Voit löytää paljon koodigeneraattoreita muualla, mutta tämä on todella ainutlaatuinen. Se on myös hauskin ja ehkä hienoin web-sovellus, jonka olen nähnyt tähän mennessä tänä vuonna.

Tutustu LayerStylesiin ja katso, mitä mieltä olet. Voit tinkata a live-versio demo-sivulla ja etsi kaikki käytettävissä olevat lähdekoodit ilmaiseksi GitHubissa.

Tai jos haluat levittää luojaa, voit tweetata ihailujasi @mrflix.