Guía del usuario Cancelar

Extracción de CSS | Illustrator

Buscar

Última actualización el 24 may. 2023

Guía del usuario de Illustrator
Descubra Illustrator
1. Introducción a Illustrator
2. Espacio de trabajo
3. Herramientas en Illustrator
  1. Herramientas de un vistazo
  2. Selección de herramientas
  3. Herramientas de navegación
    1. Mano
    2. Rotar vista
    3. Zoom
  4. Herramientas de pintura
  5. Herramientas de texto
  6. Herramientas de dibujo
  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
    11. Dimensión
4. IA generativa (no disponible en China continental)
5. Acciones rápidas
Illustrator en la web (beta)
Illustrator para iPad
1. Presentación de Illustrator para iPad
2. Espacio de trabajo
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
7. Uso de imágenes
  1. Vectorizar imágenes de trama
8. Color
  1. Aplicar colores y degradados
Documentos en la nube
1. Conceptos básicos
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
Añadir y editar contenido
Importación, exportación y almacenamiento
1. Importación
2. Bibliotecas Creative Cloud en Illustrator
  1. Bibliotecas Creative Cloud en Illustrator
3. Guardar y exportar
Impresión
1. Prepárese para imprimir
2. Impresión
Automatizar tareas
Solución de problemas

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.

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:

Seleccione Ventana > Propiedades CSS.

Nota:

Asegúrese de ponerle nombre a los objetos del documento de Illustrator en el panel Capas.
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.
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.
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.

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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)&quot;;
  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?

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.