Guía del usuario Cancelar

Extracción de CSS | Illustrator

Buscar
  1. Guía del usuario de Illustrator
  2. Descubra Illustrator
    1. Introducción a Illustrator
      1. Novedades de Illustrator
      2. Preguntas habituales
      3. Requisitos del sistema de Illustrator
      4. Illustrator para Apple Silicon
    2. Espacio de trabajo
      1. Conceptos básicos del espacio de trabajo
      2. Aprenda más rápido con el panel Descubrir de Illustrator
      3. Creación de documentos
      4. Barra de herramientas
      5. Métodos abreviados de teclado predeterminados
      6. Personalizar métodos abreviados de teclado
      7. Introducción a las mesas de trabajo
      8. Organizar mesas de trabajo
      9. Personalizar el espacio de trabajo
      10. Panel Propiedades
      11. Configuración de preferencias
      12. Espacio de trabajo táctil
      13. Compatibilidad con Microsoft Surface Dial en Illustrator
      14. Deshacer ediciones y administrar el historial del diseño
      15. Rotar vista
      16. Reglas, cuadrículas y guías
      17. Accesibilidad en Illustrator
      18. Modo seguro
      19. Modo de visualización de la ilustración
      20. Uso de Touch Bar con Illustrator
      21. Archivos y plantillas
    3. Herramientas en Illustrator
      1. Herramientas de un vistazo
      2. Selección de herramientas
        1. Selección
        2. Selección directa
        3. Selección de grupos
        4. Varita mágica
        5. Lazo
        6. Mesa de trabajo
      3. Herramientas de navegación
        1. Mano
        2. Rotar vista
        3. Zoom
      4. Herramientas de pintura
        1. Degradado
        2. Malla
        3. Creador de formas
      5. Herramientas de texto
        1. Texto
        2. Texto en trazado
        3. Texto vertical
      6. Herramientas de dibujo
        1. Pluma
        2. Añadir Punto de ancla
        3. Eliminar Puntos de ancla
        4. Punto de ancla
        5. Curvatura
        6. Segmento de línea
        7. Rectángulo
        8. Rectángulo redondeado
        9. Elipse
        10. Polígono
        11. Estrella
        12. Pincel
        13. Pincel de manchas
        14. Lápiz
        15. Shaper
        16. Sector
      7. Modificación de herramientas
        1. Rotar
        2. Reflejar
        3. Escala
        4. Distorsionar
        5. Anchura
        6. Transformación libre
        7. Cuentagotas
        8. Fusión
        9. Borrador
        10. Tijeras
    4. Acciones rápidas
      1. Texto retro
      2. Texto con resplandor de neón
      3. Vieja escuela texto
      4. Volver a colorear
      5. Convertir boceto en vector
  3. Illustrator para iPad
    1. Presentación de Illustrator para iPad
      1. Información general sobre Illustrator para iPad
      2. Preguntas frecuentes de Illustrator para iPad
      3. Requisitos del sistema | Illustrator para iPad
      4. Lo que puede o no puede hacer con Illustrator para iPad
    2. Espacio de trabajo
      1. Espacio de trabajo de Illustrator para iPad
      2. Métodos abreviados y gestos táctiles
      3. Métodos abreviados de teclado de Illustrator para iPad
      4. Ajustar la configuración de la aplicación
    3. Documentos
      1. Usar documentos en Illustrator para iPad
      2. Importar documentos de Photoshop y Fresco
    4. Seleccionar y organizar objetos
      1. Crear objetos repetidos
      2. Fusionar objetos
    5. Dibujo
      1. Dibujar y editar trazados
      2. Dibujar y editar formas
    6. Texto
      1. Trabajar con texto y fuentes
      2. Crear diseños de texto a lo largo de un trazado
      3. Añadir fuentes propias
    7. Uso de imágenes
      1. Vectorizar imágenes de trama
    8. Color
      1. Aplicar colores y degradados
  4. Documentos en la nube
    1. Conceptos básicos
      1. Trabajar con documentos en la nube de Illustrator
      2. Compartir documentos en la nube de Illustrator y colaborar en ellos
      3. Compartir documentos para revisar
      4. Ampliar el almacenamiento en la nube de Adobe Illustrator
      5. Documentos en la nube de Illustrator | Preguntas habituales
    2. Solución de problemas
      1. Solución de problemas de creación o guardado de documentos en la nube de Illustrator
      2. Solucionar errores de documentos en la nube de Illustrator
  5. Añadir y editar contenido
    1. Dibujo
      1. Conceptos básicos de dibujo
      2. Editar trazados
      3. Dibujar ilustraciones con píxeles perfectos
      4. Dibujar con la herramienta Pluma, Curvatura o Lápiz
      5. Dibujar líneas y formas sencillas
      6. Calco de imagen
      7. Simplificar un trazado
      8. Definir cuadrículas de perspectiva
      9. Herramientas y conjuntos de símbolos
      10. Ajustar segmentos de trazado
      11. Diseñar una flor en cinco sencillos pasos
      12. Dibujo en perspectiva
      13. Símbolos
      14. Dibujar trazados con pixelado perfecto en flujos de trabajo web
    2. Objetos y materiales 3D
      1. Acerca de los efectos 3D en Illustrator
      2. Crear gráficos 3D
      3. Mapear ilustraciones en objetos 3D
      4. Crear texto 3D
    3. Color
      1. Acerca del color
      2. Seleccionar colores
      3. Uso y creación de muestras
      4. Ajustar colores
      5. Uso del panel Temas de Adobe Color
      6. Grupos de colores (armonías)
      7. Panel Temas de color
      8. Volver a colorear la ilustración
    4. Pintura
      1. Acerca de la pintura
      2. Pintar con rellenos y trazos
      3. Grupos de pintura interactiva
      4. Degradados
      5. Pinceles
      6. Transparencia y modos de fusión
      7. Aplicar un trazo a un objeto
      8. Creación y edición de motivos
      9. Mallas
      10. Motivos
    5. Seleccionar y organizar objetos
      1. Seleccionar objetos
      2. Capas
      3. Agrupar y expandir objetos
      4. Mover, alinear y distribuir objetos
      5. Apilar objetos    
      6. Bloquear, ocultar y eliminar objetos
      7. Copiar y duplicar objetos
      8. Rotar y reflejar objetos
      9. Entrelazar objetos
    6. Cambiar la forma de objetos
      1. Recortar imágenes
      2. Transformar objetos
      3. Combinar objetos
      4. Cortar, dividir y recortar objetos
      5. Deformación de posición libre
      6. Escalar y distorsionar objetos
      7. Fusionar objetos
      8. Cambiar formas con envolventes
      9. Cambiar forma de objetos con efectos
      10. Crear nuevas formas con las herramientas Shaper y Creador de formas
      11. Uso de vértices interactivos
      12. Flujos de trabajo para cambiar de forma mejorados con compatibilidad táctil
      13. Editar máscaras de recorte
      14. Formas interactivas
      15. Crear formas mediante la herramienta Creador de formas
      16. Edición global
    7. Texto
      1. Añadir texto y trabajar con objetos tipográficos
      2. Crear listas numeradas y con viñetas
      3. Administrar área de texto
      4. Fuentes y tipografía
      5. Aplicación de formato al texto
      6. Importar y exportar texto
      7. Aplicación de formato a párrafos
      8. Caracteres especiales
      9. Crear texto en un trazado
      10. Estilos de carácter y de párrafo
      11. Tabulaciones
      12. Texto y tipografía
      13. Encontrar fuentes que faltan (flujo de trabajo de Typekit)
      14. Modificar texto en Illustrator 10
      15. Texto en árabe y hebreo
      16. Fuentes | Preguntas frecuentes y soluciones de problemas
      17. Crear efecto de texto 3D
      18. Diseños de tipografía creativos
      19. Ampliar y rotar texto
      20. Espaciado entre líneas y caracteres
      21. Separación de sílabas y saltos de línea
      22. Mejoras de texto
      23. Ortografía y diccionarios de idiomas
      24. Aplicación de formato de caracteres asiáticos
      25. Modos de composición de alfabetos asiáticos
      26. Crear diseños de texto con objetos de fusión
      27. Crear un póster con texto con Calco de imagen
    8. Crear efectos especiales
      1. Trabajar con efectos
      2. Estilos gráficos
      3. Crear una sombra paralela
      4. Atributos de apariencia
      5. Crear bosquejos y mosaicos
      6. Sombras paralelas, resplandor y desvanecimiento
      7. Resumen de efectos
    9. Gráficos web
      1. Métodos óptimos para crear gráficos web
      2. Gráficas
      3. SVG
      4. Crear animaciones
      5. Sectores y mapas de imágenes
  6. Importación, exportación y almacenamiento
    1. Importación
      1. Colocar varios archivos
      2. Administrar archivos vinculados e incrustados
      3. Información sobre vínculos
      4. Desincrustar imágenes
      5. Importar ilustraciones de Photoshop
      6. Importar imágenes de mapa de bits
      7. Importar archivos Adobe PDF
      8. Importar archivos EPS, DCS y de AutoCAD
    2. Bibliotecas Creative Cloud en Illustrator 
      1. Bibliotecas Creative Cloud en Illustrator
    3. Guardar
      1. Guardar ilustraciones
    4. Exportar
      1. Usar ilustraciones de Illustrator en Photoshop
      2. Exportar ilustraciones
      3. Recopilar recursos y exportar en lotes
      4. Empaquetado de archivos
      5. Creación de archivos de Adobe PDF
      6. Extraer CSS | Illustrator CC
      7. Opciones de Adobe PDF
      8. Información de archivo y metadatos
  7. Impresión
    1. Prepárese para imprimir
      1. Ajuste de los documentos para impresión
      2. Cambiar el tamaño y la orientación de la página
      3. Especificar marcas de recorte para separación o alineación
      4. Primeros pasos con un lienzo grande
    2. Impresión
      1. Sobreimprimir
      2. Imprimir mediante gestión del color
      3. Impresión PostScript
      4. Ajustes preestablecidos de impresión
      5. Marcas de impresora y sangrados
      6. Imprimir y guardar ilustraciones transparentes
      7. Reventado
      8. Impresión de separaciones de color
      9. Imprimir degradados, mallas y fusiones de color
      10. Sobreimpresión en blanco
  8. Automatizar tareas
    1. Combinar datos mediante el panel Variables
    2. Automatización con scripts
    3. Automatización con acciones
  9. Solución de problemas 
    1. Errores de bloqueo
    2. Recuperar archivos después de un cierre inesperado
    3. Problemas de archivos
    4. Formatos de archivo admitidos
    5. Problemas con controladores de dispositivos GPU
    6. Problemas con dispositivos Wacom
    7. Problemas con archivos DLL
    8. Problemas de memoria
    9. Problemas con archivos de preferencias
    10. Problemas de fuentes
    11. Problemas con la impresora
    12. Enviar informe de error a Adobe
    13. Mejora del rendimiento de Illustrator

Aprenda a extraer y exportar el código CSS para objetos individuales o para todo el diseño de Illustrator.

Puede crear el diseño de una página HTML en Illustrator. Esto sirve como una guía visual excelente para un desarrollador web que pueda posteriormente programar el diseño, los estilos y los objetos de una página con la ayuda de un editor HTML. Sin embargo, la tarea de replicar el aspecto y posición exactos de los componentes y objetos puede resultar complicada y tediosa.

Con Illustrator, al crear el diseño de una página HTML, también puede generar y exportar el código CSS subyacente que determina el aspecto que tendrán los componentes y objetos de la página. El código CSS permite controlar el aspecto del texto y los objetos (como ocurre con los estilos gráficos y los estilos de carácter).   

Visualización y extracción de código CSS

El panel Propiedades CSS permite a los usuarios hacer lo siguiente:

  • Ver y copiar el código CSS de los objetos seleccionados.
  • Exportar uno, varios o todos los elementos seleccionados de Illustrator a un archivo CSS.
  • Exportar imágenes rasterizables ya usadas.
  • Generar código CSS específico de un navegador.
Código de propiedades CSS

A. Aparece un aviso si algunos estilos no se pudieron convertir a código CSS B. Cuadro de diálogo Opciones de exportación de CSS C. Exportación de CSS seleccionado a archivo D. Copia del estilo seleccionado en el portapapeles E. Generar CSS F. Menú del panel Propiedades CSS G. Estilos utilizados en los objetos seleccionados H. Código CSS 

Para ver y extraer el código CSS, siga los pasos que se indican:

  1. Seleccione Ventana > Propiedades CSS.

    Nota:

    Asegúrese de ponerle nombre a los objetos del documento de Illustrator en el panel Capas.

  2. Para mostrar el código CSS generado:

    Para un objeto:

    Seleccione un objeto. El código CSS del objeto aparecerá en el panel Propiedades CSS.

    Para varios objetos:

    Mantenga presionada la tecla Mayús, seleccione varios objetos y, a continuación, seleccione Generar CSS del panel Propiedades CSS.

    Para todos los objetos:

    Presione Ctrl/Cmd+A para seleccionar todos los objetos y, a continuación, seleccione Generar CSS en el panel Propiedades CSS.

  3. Para obtener el código CSS generado, realice una de las siguientes acciones:

    Para copiar el código seleccionado:

    • Seleccione un código específico y seleccione  Copiar estilo seleccionado para copiarlo en el portapapeles.
    • Seleccione el menú del Panel de propiedades de CSS   y seleccione  Exportar CSS seleccionado para exportar a un archivo.

    Para copiar todos los códigos:

    • Np seleccione nada en el código CSS y seleccione Copiar estilo seleccionado para copiarlo en el portapapeles.
    • Seleccione el menú del Panel de propiedades de CSS   y seleccione Exportar todo para exportar a un archivo.

  4. Mientras guarda el código CSS en un archivo, elija entre las opciones dadas en el cuadro de diálogo Opciones de exportación de CSS.

    Cuadro de diálogo Opciones de exportación de CSS
    Opciones de exportación CSS

Muestra de código CSS

Rectángulo con un degradado aplicado (todos los 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);
}

Rectángulo con un degradado aplicado (solo navegadores basados en webkits)

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

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

Contenidos relacionados

¿Tiene alguna pregunta o idea?

Pregunte a la comunidad

Si tiene alguna pregunta que formular o una idea que compartir, entre y participe en la Comunidad de Adobe Illustrator. Nos encantaría conocer sus dudas y comentarios.

Logotipo de Adobe

Inicia sesión en tu cuenta

Vínculos rápidos

Ver todos los planes Administrar los planes

Avisos legales    |    Política de privacidad en línea