Você pode criar o design de uma página HTML no Illustrator. Ele servirá como um guia visual para o Desenvolvedor Web, que poderá codificar o layout, os estilos e os objetos de uma página em um editor de HTML. No entanto, replicar a aparência e a posição exatas dos componentes e objetos é um processo demorado e entediante.

Com o Illustrator CC, ao criar o layout de uma página HTML, você também pode gerar e exportar o código CSS subjacente que determina a aparência dos componentes e objetos na página. O CSS permite controlar a aparência do texto e de objetos (semelhantes aos estilos de caracteres e de gráficos). Você pode optar por exportar o código CSS para objetos individuais ou para todo o layout criado no Illustrator.   

No painel Propriedades do CSS (Janela > Propriedades do CSS), os usuários podem:

  • Ver o código CSS para objetos selecionados
  • Copiar o código CSS para objetos selecionados
  • Exportar um, vários ou todos os elementos do Illustrator selecionados para um arquivo CSS
  • Exportar as imagens usadas que podem ser rasterizadas
  • Gerar código CSS específico para cada navegador

Vídeo: Extração de CSS no Illustrator CC

Vídeo: Extração de CSS no Illustrator CC
Veja como criar sites com mais rapidez, permitindo que o Illustrator CC gere códigos CSS para você — para textos, objetos e até mesmo para layouts completos.
Rufus Deuchler

Ver e extrair código CSS

Observação:

Para gerar o código CSS, siga uma destas instruções:

  • Certifique-se de que os objetos no documento do Illustrator estejam nomeados no painel Camadas.
  • Clique em Janela > Propriedades do CSS > menu suspenso > Opções de exportação e marque a caixa de seleção Gerar CSS para objetos sem nome. 

  1. Selecione Janela > Propriedades do CSS.

    A. Aviso, se alguns estilos não puderam ser convertidos para o código CSS B. Caixa de diálogo Opções de exportação CSS C. Exportar CSS selecionado para arquivo D. Copiar estilo selecionado para a área de transferência E. Gerar CSS F. Submenu G. Estilos usados nos objetos selecionados H. Código CSS 
  2. Em um documento do Illustrator aberto, siga estes procedimentos:

    • Selecione um objeto. O código CSS para o objeto é exibido no painel Propriedades do CSS.
    • Pressione Shift, selecione vários objetos e clique no botão Gerar CSS no painel Propriedades do CSS.
    • Pressione Ctrl/Cmd + A para selecionar todos os objetos e clique no botão Gerar CSS no painel Propriedades do CSS.

    O código CSS gerado é exibido.

  3. Para obter o código CSS gerado, siga um destes procedimentos:

    • Para copiar o código selecionado, selecione o código específico e:
      • Para copiar para a área de transferência, clique em Copiar estilo selecionado
      • Para exportar para um arquivo, clique no menu suspenso e em Exportar CSS selecionado
    • Para copiar todo o código, não faça nenhuma seleção no código CSS e, em seguida:
      • Para copiar para a área de transferência, clique em Copiar estilo selecionado
      • Para exportar para um arquivo, clique no menu suspenso e em Exportar tudo
  4. Ao salvar o código CSS em um arquivo, escolha uma destas opções:

    Observação:

    Para modificar o conteúdo do código CSS gerado, no painel Propriedades do CSS, clique em Opções de exportação e faça as seleções apropriadas.

Código CSS de amostra

Retângulo com um gradiente aplicado (todos os navegadores)

.GRADIENT_BOX
{
  background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%);
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)";
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

Retângulo com gradiente aplicado (somente navegadores baseados em webkit)

.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

Vários objetos

.NormalCharacterStyle
{
  font-family : Myriad Pro;
  font-size : 12px;
}
.st0
{
  border-style : Solid;
  border-color : #FFFFFF;
  border-color : rgba(255, 255, 255, 1);
  border-width : 0px;
}
.GRADIENT_BOX
{
  background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) ));
  background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%);
  border-style : Solid;
  border-color : #231F20;
  border-color : rgba(35, 31, 32, 1);
  border-width : 1px;
}

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online