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. Creación de documentos
      3. Herramientas
      4. Personalizar métodos abreviados de teclado
      5. Mesas de trabajo
      6. Personalizar el espacio de trabajo
      7. Panel Propiedades
      8. Configuración de preferencias
      9. Espacio de trabajo táctil
      10. Compatibilidad con Microsoft Surface Dial en Illustrator
      11. Recuperar, deshacer y automatizar acciones
      12. Rotar vista
      13. Reglas, cuadrículas y guías
      14. Accesibilidad en Illustrator
      15. Modo seguro
      16. Modo de visualización de la ilustración
      17. Uso de Touch Bar con Illustrator
      18. Archivos y plantillas
      19. Sincronizar la configuración a través de Adobe Creative Cloud
    3. Herramientas en Illustrator
      1. Selección
        1. Información general
        2. Selección
        3. Selección directa
        4. Lazo
        5. Mesa de trabajo
      2. Navegación
        1. Información general
        2. Zoom
        3. Rotar vista
      3. Pintar
        1. Información general
        2. Degradado
        3. Creador de formas
      4. Texto
        1. Información general
        2. Texto
        3. Texto en trazado
  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. Ampliar el almacenamiento en la nube de Adobe Illustrator
      4. 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. Efectos 3D y materiales de Adobe Substance
      1. Acerca de los efectos 3D en Illustrator
      2. Crear gráficos 3D
      3. Crear 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. Duplicar objetos
      8. Rotar y reflejar 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. Crear texto
      2. Fuentes y tipografía
      3. Aplicación de formato al texto
      4. Importar y exportar texto
      5. Aplicación de formato a párrafos
      6. Caracteres especiales
      7. Crear texto en un trazado
      8. Estilos de carácter y de párrafo
      9. Tabulaciones
      10. Texto y tipografía
      11. Encontrar fuentes que faltan (flujo de trabajo de Typekit)
      12. Modificar texto en Illustrator 10
      13. Texto en árabe y hebreo
      14. Fuentes | Preguntas frecuentes y soluciones de problemas
      15. Crear efecto de texto 3D
      16. Diseños de tipografía creativos
      17. Ampliar y rotar texto
      18. Espaciado entre líneas y caracteres
      19. Separación de sílabas y saltos de línea
      20. Mejoras de texto
      21. Ortografía y diccionarios de idiomas
      22. Aplicación de formato de caracteres asiáticos
      23. Modos de composición de alfabetos asiáticos
      24. Crear diseños de texto con objetos de fusión
      25. 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áficos
      3. SVG
      4. Crear animaciones
      5. Sectores y mapas de imágenes
  6. Importación, exportación y almacenamiento
    1. Importación
      1. Importar archivos de ilustración
      2. Importar imágenes de mapa de bits
      3. Importar ilustraciones de Photoshop
      4. Colocar varios archivos | Illustrator CC
      5. Desincrustar imágenes
      6. Importar archivos Adobe PDF
      7. Importar archivos EPS, DCS y de AutoCAD
      8. Información sobre enlaces
    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. Configurar 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. Problemas con controladores de dispositivos GPU
    5. Problemas con dispositivos Wacom
    6. Problemas con archivos DLL
    7. Problemas de memoria
    8. Problemas con archivos de preferencias
    9. Problemas de fuentes
    10. Problemas con la impresora
    11. Enviar informe de error a Adobe

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). Puede decidir si desea exportar el código CSS para objetos individuales o para todo el diseño de Illustrator.   

El panel Propiedades CSS (Ventana > Propiedades CSS) permite a los usuarios realizar las siguientes acciones:

  • Ver el código CSS de los objetos seleccionados
  • 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

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

Nota:

Para generar el código CSS, lleve a cabo uno de los procedimientos siguientes:

  • Asegúrese de ponerle nombre a los objetos del documento de Illustrator en el panel Capas.
  • Haga clic en Ventana > Propiedades CSS > menú desplegable > Opciones de exportación y, a continuación, seleccione la casilla Generar CSS para objetos sin nombre. 

  1. Seleccione Ventana > Propiedades CSS.

    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ú emergente G. Estilos utilizados en los objetos seleccionados H. Código CSS 

  2. En un documento abierto de Illustrator, lleve a cabo uno de los procedimientos siguientes:

    • Seleccione un objeto. El código CSS del objeto aparecerá en el panel Propiedades CSS.
    • Mantenga presionada la tecla Mayús, seleccione varios objetos y, a continuación, haga clic en el botón Generar CSS del panel Propiedades CSS.
    • Presione Ctrl/Cmd+A para seleccionar todos los objetos y, a continuación, haga clic en el botón Generar CSS del panel Propiedades CSS.

    Aparecerá el código CSS generado.

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

    • Para copiar el código seleccionado, seleccione el código en concreto y, después:
      • Para copiar en el portapapeles, haga clic en Copiar estilo seleccionado
      • Para exportar a un archivo, haga clic en el menú desplegable y, a continuación, haga clic en Exportar CSS seleccionado
    • Para copiar todo el código, no seleccione nada del código CSS y, a continuación:
      • Para copiar en el portapapeles, haga clic en Copiar estilo seleccionado
      • Para exportar a un archivo, haga clic en el menú desplegable y, a continuación, haga clic en Exportar todo

  4. Al guardar código CSS en un archivo, elija una de las siguientes opciones:

    Opciones de exportación CSS

    Nota:

    Para modificar el contenido del código CSS generado, en el panel Propiedades CSS, haga clic en Opciones de exportación y, a continuación, realice las selecciones oportunas.

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