Guia do Usuário Cancelar

Extrair CSS | Illustrator

Pesquisar
Illustrator

Illustrator

Abrir na web
  1. Guia do Usuário do Illustrator
  2. Conheça o Illustrator
    1. Introdução ao Illustrator
      1. Novidades no Illustrator
      2. Perguntas frequentes
      3. Requisitos de sistema do Illustrator
      4. Illustrator para Apple Silicon
      5. Desempenho de GPU
    2. Área de trabalho
      1. Princípios da área de trabalho
      2. Crie documentos
      3. Aprenda mais rápido com o painel Descobrir do Illustrator
      4. Acelere fluxos de trabalho usando a barra de tarefas contextual
      5. Barra de ferramentas
      6. Atalhos de teclado padrão
      7. Personalizar atalhos de teclado
      8. Introdução às pranchetas
      9. Gerenciar pranchetas
      10. Personalizar a área de trabalho
      11. Painel Propriedades
      12. Definir preferências
      13. Área de trabalho sensível ao toque
      14. Suporte ao Microsoft Surface Dial no Illustrator
      15. Desfazer edições e gerenciar histórico de design
      16. Girar visualização
      17. Guias, grades e réguas
      18. Acessibilidade no Illustrator
      19. Exibir a ilustração
      20. Usar a Touch Bar com o Illustrator
      21. Arquivos e modelos
    3. Ferramentas no Illustrator
      1. Principais características das ferramentas
      2. Selecionar ferramentas
        1. Seleção
        2. Seleção direta
        3. Seleção de grupos
        4. Varinha mágica
        5. Laço
        6. Prancheta
      3. Ferramentas de navegação
        1. Mão
        2. Girar visualização
        3. Aplicar zoom
      4. Ferramentas de pintura
        1. Degradê
        2. Malha
        3. Construtor de formas
      5. Ferramentas de texto
        1. Texto
        2. Tipo no caminho
        3. Texto vertical
      6. Ferramentas de desenho
        1. Caneta
        2. Adicionar ponto de ancoragem
        3. Excluir ponto de ancoragem
        4. Ponto de ancoragem
        5. Curvatura
        6. Segmento de linha
        7. Retângulo
        8. Retângulo arredondado
        9. Elipse
        10. Polígono
        11. Estrela
        12. Pincel
        13. Pincel irregular
        14. Lápis
        15. Shaper
        16. Fatia
      7. Ferramentas de modificação
        1. Girar
        2. Refletir
        3. Dimensionar
        4. Inclinar
        5. Largura
        6. Transformação livre
        7. Conta-gotas
        8. Mesclar
        9. Borracha
        10. Tesoura
        11. Dimensão
    4. IA generativa (não disponível na China continental)
      1. Gere cenas, assuntos e ícones usando prompts de texto
      2. Gere padrões vetoriais usando prompts de texto
      3. Gere preenchimentos de formas vetoriais usando prompts de texto
      4. Recolorir sua ilustração usando prompts de texto
    5. Ações rápidas
      1. Texto retrô
      2. Texto com brilho néon
      3. Texto com visual à moda antiga
      4. Recolorir
      5. Converter esboço em vetor
  3. Illustrator no iPad
    1. Introdução ao Illustrator no iPad
      1. Visão geral do Illustrator no iPad
      2. Perguntas frequentes sobre o Illustrator no iPad
      3. Requisitos de sistema | Illustrator no iPad
      4. O que você pode ou não fazer no Illustrator no iPad
    2. Área de trabalho
      1. Área de trabalho do Illustrator no iPad
      2. Atalhos de toque e gestos
      3. Atalhos de teclado para o Illustrator no iPad
      4. Gerenciar as configurações do seu aplicativo
    3. Documentos
      1. Trabalhar com documentos no Illustrator no iPad
      2. Importar documentos do Photoshop e do Fresco
    4. Selecionar e organizar objetos
      1. Criar objetos repetidos
      2. Mesclar objetos
    5. Desenho
      1. Desenhar e editar caminhos
      2. Desenhar e editar formas
    6. Texto
      1. Trabalhar com texto e fontes
      2. Criar designs de texto em um caminho
      3. Adicionar suas próprias fontes
    7. Trabalhar com imagens
      1. Vetorizar imagens rasterizadas
    8. Cor
      1. Aplicar cores e degradês
  4. Documentos na nuvem
    1. Noções básicas
      1. Trabalhar com documentos na nuvem do Illustrator
      2. Compartilhar e colaborar em documentos na nuvem do Illustrator
      3. Compartilhar documentos para revisão
      4. Atualizar armazenamento na nuvem para o Adobe Illustrator
      5. Documentos na nuvem do Illustrator | Perguntas comuns
    2. Solução de problemas
      1. Solucionar problemas ao criar ou salvar documentos na nuvem no Illustrator
      2. Solucionar problemas de documentos na nuvem do Illustrator
  5. Adicionar e editar conteúdo
    1. Desenho
      1. Noções básicas sobre desenho
      2. Editar caminhos
      3. Desenhar artes com pixels perfeitos
      4. Desenhar com a ferramenta Caneta, Curvatura ou Lápis
      5. Desenhar linhas e formas simples
      6. Desenhar grades retangulares e polares
      7. Desenhar e editar clarões
      8. Traçar imagens
      9. Simplificar um caminho
      10. Ferramentas de simbolismo e conjuntos de símbolos
      11. Ajustar segmentos de caminho
      12. Criar uma flor em cinco etapas fáceis
      13. Criar e editar uma grade de perspectiva
      14. Desenhar e modificar objetos em uma grade de perspectiva
      15. Usar objetos como símbolos para uso repetido
      16. Desenhar caminhos alinhados a pixels para fluxos de trabalho da Web
    2. Medida
      1. Medir e traçar dimensões
    3. Objetos e materiais 3D
      1. Sobre efeitos 3D no Illustrator
      2. Criar gráficos 3D
      3. Mapear ilustração em objetos 3D
      4. Criar texto 3D
      5. Criar objetos 3D
    4. Cor
      1. Sobre cores
      2. Selecionar cores
      3. Usar e criar amostras
      4. Ajustar cores
      5. Usar o painel Temas do Adobe Color
      6. Grupos de cores (harmonias)
      7. Painel Temas do Color
      8. Recolorir sua ilustração
    5. Pintura
      1. Sobre pintura
      2. Pintura com preenchimentos e traçados
      3. Grupos de Pintura em tempo real
      4. Gradientes
      5. Pincéis
      6. Modos de transparência e mistura
      7. Aplicar traçado a um objeto
      8. Criar e editar padrões
      9. Malhas
      10. Padrões
    6. Selecionar e organizar objetos
      1. Selecionar objetos
      2. Camadas
      3. Expandir, agrupar e desagrupar objetos
      4. Mover, alinhar e distribuir objetos
      5. Alinhar, organizar e mover objetos em um caminho
      6. Ajustar objetos ao glifo
      7. Ajustar objetos ao glifo japonês
      8. Empilhar objetos    
      9. Bloquear, ocultar e excluir objetos
      10. Copiar e duplicar objetos
      11. Girar e refletir objetos
      12. Entrelaçar objetos
      13. Criar modelos de arte realistas
    7. Remodelar objetos
      1. Cortar imagens
      2. Transformar objetos
      3. Combinar objetos
      4. Cortar, dividir e aparar objetos
      5. Distorção de marionete
      6. Dimensionar, inclinar e distorcer objetos
      7. Mesclar objetos
      8. Remodelar usando envelopes
      9. Remodelar objetos com efeitos
      10. Criar formas com as ferramentas Shaper e Construtor de formas
      11. Trabalhar com Cantos ativos
      12. Fluxos de trabalho de remodelagem aprimorados com suporte para toque
      13. Editar máscaras de corte
      14. Formas em tempo real
      15. Criar formas usando a ferramenta Construtor de formas
      16. Edição global
    8. Texto
      1. Adicionar texto e trabalhar com objetos de texto
      2. Visualizador do Reflow
      3. Criar listas numeradas e com marcadores
      4. Gerenciar área de texto
      5. Fontes e tipografia
      6. Converter texto dentro de imagens em texto editável
      7. Adicionar formatação básica ao texto
      8. Adicionar formatação avançada ao texto
      9. Importar e exportar texto
      10. Formatar parágrafos
      11. Caracteres especiais
      12. Criar texto em um caminho
      13. Estilos de caractere e de parágrafo
      14. Guias
      15. Adicionar fontes ausentes do Adobe Fonts
      16. Texto árabe e hebraico
      17. Fontes | Perguntas frequentes e dicas de solução de problemas
      18. Designs tipográficos criativos
      19. Dimensionar e girar texto
      20. Espaçamento entre linhas e caracteres
      21. Hifenização e quebras de linha
      22. Dicionários de verificação ortográfica e idiomas
      23. Formatar caracteres asiáticos
      24. Compositores para scripts asiáticos
      25. Criar designs de texto com objetos de mistura
      26. Criar um pôster de texto usando o Traçado da imagem
    9. Criar efeitos especiais
      1. Trabalhar com efeitos
      2. Estilos de gráfico
      3. Atributos de aparência
      4. Criar croquis e mosaicos
      5. Sombras projetadas, brilhos e difusão
      6. Resumo de efeitos
    10. Gráficos da Web
      1. Práticas recomendadas para a criação de gráficos da Web
      2. Gráficos
      3. SVG
      4. Fatias e mapas de imagens
  6. Importar, exportar e salvar
    1. Importar
      1. Inserir vários arquivos
      2. Gerenciar arquivos vinculados e incorporados
      3. Informações sobre vínculos
      4. Desincorporar imagens
      5. Importar trabalho artístico do Photoshop
      6. Importar imagens de bitmap
      7. Importar arquivos Adobe PDF
      8. Importar arquivos EPS, DCS e AutoCAD
    2. Bibliotecas da Creative Cloud no Illustrator 
      1. Bibliotecas da Creative Cloud no Illustrator
    3. Salvar e exportar
      1. Salvar o trabalho artístico
      2. Exportar a arte
      3. Criar arquivos Adobe PDF
      4. Opções para Adobe PDF
      5. Usar arte do Illustrator no Photoshop
      6. Coletar ativos e exportar em lotes
      7. Compactar arquivos
      8. Extrair CSS | Illustrator CC
      9. Painel Informações do documento
  7. Impressão
    1. Preparar para imprimir
      1. Configurar documentos para impressão
      2. Alterar o tamanho e a orientação da página
      3. Especificar marcas de corte para aparar ou alinhar
      4. Introdução à tela grande
    2. Impressão
      1. Superimposição
      2. Imprimir com gerenciamento de cores
      3. Impressão PostScript
      4. Predefinições de impressão
      5. Marcas da impressora e sangrias
      6. Imprimir e salvar arte transparente
      7. Trapping
      8. Imprimir separações de cores
      9. Imprimir gradientes, malhas e misturas de cores
      10. Superimposição de branco
  8. Automatizar tarefas
    1. Mesclagem de dados usando o painel Variáveis
    2. Automação com scripts
    3. Automação com ações
  9. Solução de problemas 
    1. Problemas corrigidos
    2. Problemas conhecidos
    3. Problemas de falha
    4. Recuperar arquivos após falha
    5. Modo de segurança
    6. Problemas em arquivos
    7. Formatos de arquivo com suporte
    8. Problemas no driver de dispositivo de GPU
    9. Problemas no dispositivo Wacom
    10. Problemas em arquivos DLL
    11. Problemas na memória
    12. Problemas no arquivo de preferências
    13. Problemas em fontes
    14. Problemas na impressora
    15. Compartilhar relatório de falha com a Adobe
    16. Melhorar o desempenho do Illustrator

Saiba como extrair e exportar código CSS para objetos individuais ou para todo o layout projetado no Illustrator.

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, 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).   

Exibir e extrair código CSS

O painel Propriedades de CSS permite que os usuários façam o seguinte:

  • Exibir e 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.
Código em 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. Menu do painel de propriedades de CSS G. Estilos usados nos objetos selecionados H. Código CSS 

Para visualizar e extrair o código CSS, siga os passos indicados:

  1. Selecione Janela > Propriedades de CSS.

    Observação:

    Certifique-se de que os objetos no documento do Illustrator estejam nomeados no painel Camadas.

  2. Para exibir o código CSS gerado:

    Para um objeto:

    Selecione um objeto. O código CSS para o objeto é exibido no painel Propriedades do CSS.

    Para vários objetos:

    Pressione Shift, selecione vários objetos e selecione Gerar CSS no painel Propriedades de CSS.

    Para todos os objetos:

    Pressione Ctrl/Cmd + A para selecionar todos os objetos e selecione Gerar CSS no painel Propriedades de CSS.

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

    Para copiar o código selecionado:

    • Selecione um código específico e escolha Copiar estilo selecionado para copiá-lo para a área de transferência.
    • Selecione o menu do painel de propriedades de CSS e selecione Exportar CSS selecionado para exportar para um arquivo.

    Para copiar todos os códigos:

    • Não faça nenhuma seleção no código CSS e selecione Copiar estilo selecionado para copiá-lo para a área de transferência.
    • Selecione o menu de painel de propriedades de CSS   e selecione Exportar tudo para exportar para um arquivo.

  4. Ao salvar o código CSS em um arquivo, escolha entre as opções fornecidas na caixa de diálogo Opções de exportação de CSS.

    Caixa de diálogo Opções de exportação CSS
    Opções de exportação do CSS

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;
}

Tópicos relacionados

Dúvidas ou sugestões?

Pergunte à comunidade

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe Illustrator. Adoraríamos ouvir o que você tem a dizer.

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais    |    Política de privacidade online