CSS extrahieren | Illustrator CC

Suchen
Illustrator Benutzerhandbuch

Auf dieser Seite

Gilt für: Illustrator

Sie können in Adobe Illustrator das Design für eine HTML-Seite erstellen. Dies ist eine gute visuelle Orientierung für einen Webentwickler, der dann das Layout sowie die einzelnen Stilelemente und Objekte in eine HTML-Editor-Seite einfügen kann. Das Kopieren des genauen Aussehens und der genauen Position der einzelnen Komponenten und Objekte ist jedoch ein langwieriger und mühsamer Prozess.

Mithilfe von Illustrator CC können Sie beim Erstellen des Layouts für eine HTML-Seite den zugrunde liegenden CSS-Code, der das Aussehen der Komponenten und Objekte auf der Seite festlegt, generieren und exportieren. CSS ermöglicht es Ihnen, das Aussehen von Text und Objekten zu bestimmen (ähnlich wie bei Zeichenformaten und Grafikstilen). Sie können den CSS-Code entweder für einzelne Objekte oder für das gesamte in Illustrator entwickelte Layout exportieren.   

Über das „CSS-Eigenschaften“-Bedienfeld („Fenster“ > „CSS-Eigenschaften“) können Benutzer Folgendes tun:

  • Den CSS-Code für ausgewählte Objekte anzeigen
  • Den CSS-Code für ausgewählte Objekte kopieren
  • Eine, mehrere oder alle ausgewählten Illustrator-Elemente in eine CSS-Datei exportieren
  • Verwendete Bilder, die auch zur Rasterisierung verwendbar sind, exportieren
  • Browserspezifischen CSS-Code generieren

Video: CSS-Extrahierung in Illustrator CC

Video: CSS-Extrahierung in Illustrator CC
Erfahren Sie, wie Sie Websites schneller erstellen können, indem Sie mit Illustrator CC CSS-Code für Text, Objekte und sogar komplette Layouts generieren.
Rufus Deuchler

CSS-Code anzeigen und extrahieren

Hinweis:

Führen Sie zum Generieren von CSS-Code einen der folgenden Schritte aus:

  • Stellen Sie sicher, dass Objekte in Ihrem Illustrator-Dokument im Bedienfeld der Ebene benannt sind.
  • Klicken Sie auf „Fenster“ > „CSS-Eigenschaften“ > „Flyout-Menü“ > „Exportoptionen“, und aktivieren Sie das Kontrollkästchen „CSS für unbenannte Objekte generieren“. 

  1. Wählen Sie „Fenster“ > „CSS-Eigenschaften“ aus.

    A. Warnung, wenn einige Stilelemente nicht in CSS-Code konvertiert werden konnten B. Dialogfeld für CSS-Export-Optionen C. Ausgewählten CSS-Code in Datei exportieren D. Ausgewählte Stilelemente in die Zwischenablage kopieren E. CSS erstellen F. Flyout-Menü G. In ausgewählten Objekten verwendete Stilelemente H. CSS-Code 

  2. Führen Sie in einem geöffneten Adobe Illustrator-Dokument einen der folgenden Schritte aus:

    • Wählen Sie ein Objekt aus. Der CSS-Code für das Objekt wird im „CSS-Eigenschaften“-Bedienfeld angezeigt.
    • Halten Sie Umschalttaste gedrückt, wählen sie mehrere Objekte aus, und klicken Sie dann auf die Schaltfläche „CSS-Code generieren“ im „CSS-Eigenschaften“-Bedienfeld.
    • Drücken Sie STRG/CMD + A, um alle Objekte auszuwählen, und klicken Sie dann auf die Schaltfläche „CSS-Code generieren“ im „CSS-Eigenschaften“-Bedienfeld.

    Der generierte CSS-Code wird angezeigt.

  3. Führen Sie zum Abrufen des generierten CSS-Codes einen der folgenden Schritte aus:

    • Wählen Sie zum Kopieren von ausgwähltem CSS-Code ein bestimmtes Codesegment aus und tun Sie dann folgendes:
      • Klicken Sie zum Kopieren in die Zwischenablage auf „Ausgewähltes Stilelement kopieren“
      • Klicken Sie zum Exportieren einer Datei auf das Flyout-Menü und dann auf „Ausgewählten CSS-Code exportieren“
    • Wählen Sie zum Kopieren des gesamten CSS-Codes kein bestimmtes Codesegment aus und tun Sie dann folgendes:
      • Klicken Sie zum Kopieren in die Zwischenablage auf „Ausgewähltes Stilelement kopieren“
      • Klicken Sie zum Exportieren einer Datei auf das Flyout-Menü und dann auf „Alle exportieren“

  4. Wählen Sie während des Speicherns von CSS-Code in eine Datei eine der folgenden Optionen aus:

    Hinweis:

    Klicken Sie zum Ändern des Inhalts des generierten CSS-Codes im Bedienfeld „CSS-Eigenschaften“ auf „Exportoptionen“, und nehmen Sie dann die entsprechenden Änderungen vor.

CSS-Beispielcode

Rechteck mit angewendetem Verlauf (alle Browser)

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

Rechteck mit angewendetem Verlauf (nur Webkit-basierte Browser) 

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

Mehrere Objekte 

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie

Region wählen

Durch Auswahl einer Region ändert sich die Sprache und ggf. der Inhalt auf 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