Gerar CSS a partir de camadas.

O recurso Copiar CSS gera propriedades de folha de estilo em cascata diretamente das camadas do Photoshop, capturando as especificações de design que podem ser coladas nos arquivos de folhas de estilo.Esse fluxo de trabalho preenche a lacuna entre o design visual e a implementação de código, especialmente ao preparar ativos para projetos da web ou colaborar com desenvolvedores que precisam de especificações de estilo precisas.

Use o recurso Copiar CSS quando precisar traduzir elementos de design visual em declarações de estilo prontas para código.Esse recurso funciona com camadas de forma individuais, camadas de texto ou grupos de camadas que contêm esses elementos. Ele gera CSS que pode ser colado diretamente na folha de estilo, capturando propriedades de design com precisão perfeita de pixel.Para fluxos de trabalho mais amplos de design para a web, explore efeitos e estilos de camada para mais opções de estilo e exportação de ativos para outros formatos de saída.

Propriedades CSS capturadas de camadas.

Copiar CSS extrai propriedades diferentes, dependendo do tipo de camada selecionado.

As camadas de forma geram CSS para:

• Coordenadas de tamanho e posição
• Cor do traçado
• Cor de preenchimento, incluindo definições de gradiente
• Efeitos de sombra

As camadas de texto capturam propriedades de forma, além de especificações de tipografia:

• Família de fontes
• Tamanho da fonte e espessura
• Altura da linha
• Decoração de texto (sublinhado, tachado)
• Alinhamento vertical (sobrescrito, subscrito)
• Alinhamento de texto

Grupos de camadas criam classes CSS estruturadas que representam relações entre elementos pai e filho. O próprio grupo se torna uma div pai, enquanto cada camada do grupo gera uma div filha. Os valores de posição top e left dos elementos filhos são calculados em relação ao contêiner pai, espelhando o comportamento padrão de posicionamento do CSS.

Limitações do Copiar CSS.

O Copiar CSS não funciona com Objetos Inteligentes. Se a camada for um Objeto Inteligente, clique duas vezes para editar o conteúdo e copiar o CSS das camadas no documento do Objeto Inteligente, ou rasterize a camada primeiro, se for adequado ao fluxo de trabalho.

O recurso não pode processar várias camadas de forma ou de texto selecionadas simultaneamente, a menos que estejam agrupadas. Para copiar o CSS de várias camadas de uma só vez, primeiro coloque-as em um grupo de camadas.

Gerar código CSS a partir das camadas

O código CSS agora está na área de transferência e pronto para ser integrado ao projeto web. Revise as propriedades geradas para garantir que estejam alinhadas aos requisitos de desenvolvimento e ajuste os valores conforme necessário para o design responsivo ou a compatibilidade com o navegador.