Extracción de CSS | Illustrator CC

Buscar
Adobe Illustrator Guía del usuario

En esta página

Se aplica a: Adobe 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 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

Elija su región

Al seleccionar una región, cambia el idioma o el contenido en Adobe.com.

Americas
Brasil
Canada - English
Canada - Français
Latinoamérica
México
United States
Europe, Middle East and Africa
Africa - English
België
Belgique
Belgium - English
Česká republika
Cyprus - English
Danmark
Deutschland
Eesti
España
France
Greece - English
Ireland
Israel - English
Italia
Latvija
Lietuva
Luxembourg - Deutsch
Luxembourg - English
Luxembourg - Français
Magyarország
Malta - English
Middle East and North Africa - English
Nederland
Norge
Österreich
Polska
Portugal
România
Schweiz
Slovenija
Slovensko
Suisse
Suomi
Sverige
Svizzera
Türkiye
United Kingdom
България
Россия
Україна
الشرق الأوسط وشمال أفريقيا - اللغة العربية
ישראל - עברית
Asia - Pacific
Australia
Hong Kong S.A.R. of China
India - English
New Zealand
Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English
中国
中國香港特別行政區
台灣地區
日本
한국
Commonwealth of Independent States
Includes Armenia, Azerbaijan, Belarus, Georgia, Kazakhstan, Kyrgyzstan, Moldova, Tajikistan, Turkmenistan, Ukraine, Uzbekistan