Pagina inicial » Web design » Projetar CSS com este editor de aplicativos da Web estilo Adobe

    Projetar CSS com este editor de aplicativos da Web estilo Adobe

    O software da Adobe é reconhecido mundialmente por designers de todas as idades, mas nenhum mais do que o Photoshop. Painéis de edição PhotoShop são a coisa toda com tudo que você precisa para construir projetos personalizados.

    E agora, há um livre editor de aplicativos da web, chamado LayerStyles, que imita o editor de camadas do Photoshop em seu navegador. Deixa você gerar dinamicamente código CSS como se você estivesse trabalhando no Photoshop.

    Se você visitar o página do construtor você pode mexer com isso para ver como funciona.

    A janela vem com cinco painéis de estilo diferentes que tudo imita o Photoshop. Eles seguem as mesmas configurações e eles atualizar imediatamente com uma caixa de demonstração na página.

    Estes são os painéis que você pode escolher:

    1. Sombra
    2. Sombra interior
    3. fundo
    4. Fronteira
    5. Raio da Borda

    Todos eles imitam o Adobe GUI, o que torna essa ferramenta tão divertida para os designers. Você também obtém o código CSS completo, gerado gratuitamente.

    Basta clicar na caixa do canto inferior esquerdo “Código CSS” para pegue o seu trecho. Ele vem com todas as propriedades CSS3 para tudo que você selecionou.

    E o melhor de tudo, esse projeto é completamente código aberto e livre no GitHub se você quiser baixar uma cópia local. Não só isso pode ser divertido para gerando CSS, mas também é uma ótima maneira de aprender como construir um aplicativo da web.

    O site usa um muito do Bibliotecas JavaScript, junto com plugins jQuery. Foi construído pelo desenvolvedor Felix Niklas, que fez isso como um projeto paralelo.

    Você pode encontrar muitos geradores de código em outro lugar, mas este é verdadeiramente único. É também o aplicativo mais divertido e talvez o mais legal da web que eu vi até agora este ano.

    Dê uma olhada no LayerStyles e veja o que você pensa. Você pode mexer com um versão ao vivo na página de demonstração e encontre todo o código fonte disponível grátis no GitHub.

    Ou, se você quer se espalhar graças ao criador, você pode twittar suas admirações @mrflix.