Extracción de CSS | Illustrator CC

Buscar
Adobe Illustrator Guía del usuario

En esta página

Se aplica a: Adobe Illustrator

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 CC, 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

Vídeo: Extracción de CSS en Illustrator CC

Vídeo: Extracción de CSS en Illustrator CC
Descubra cómo crear sitios web mucho más rápido: Illustrator CC generará el código CSS por usted para texto, objetos e incluso diseños completos.
Rufus Deuchler

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

Nota:

Para generar el código CSS, realice una de las siguientes acciones:

  • 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.

    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, realice una de las siguientes acciones:

    • 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:

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

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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