Benutzerhandbuch Abbrechen

Extrahieren von CSS | Illustrator

Suchen

Zuletzt aktualisiert am 17. November 2022

Illustrator-Benutzerhandbuch
Illustrator kennenlernen
1. Einführung in Illustrator
2. Arbeitsbereich
3. Werkzeuge in Illustrator
  1. Werkzeuge-Überblick
  2. Auswahl-Werkzeuge
  3. Navigieren-Werkzeuge
  4. Malwerkzeuge
  5. Textwerkzeuge
  6. Zeichnen-Werkzeuge
  7. Änderungswerkzeuge
    1. Drehen
    2. Reflektieren
    3. Skalieren
    4. Verbiegen
    5. Breite
    6. Frei transformieren
    7. Pipette
    8. Angleichen
    9. Radiergummi
    10. Schere
    11. Bemaßung
4. Generative KI (nicht verfügbar in Festlandchina)
5. Schnellaktionen
Illustrator im Web (Beta)
Illustrator auf dem iPad
1. Einführung in Illustrator auf dem iPad
2. Arbeitsbereich
3. Dokumente
  1. Arbeiten mit Dokumenten in Illustrator auf dem iPad
  2. Importieren von Photoshop- und Fresco-Dokumenten
4. Auswählen und Anordnen von Objekten
  1. Erstellen von Wiederholungsobjekten
  2. Angleichen von Objekten
5. Zeichnen
  1. Zeichnen und Bearbeiten von Pfaden
  2. Zeichnen und Bearbeiten von Formen
6. Text
7. Arbeiten mit Bildern
  1. Vektorisieren von Rasterbildern
8. Farben
  1. Anwenden von Farben und Farbverläufen
Cloud-Dokumente
1. Grundlagen
2. Fehlerbehebung
  1. Fehlerbehebung beim Erstellen oder Speichern von Problemen für Illustrator-Cloud-Dokumente
  2. Beheben von Problemen mit Illustrator-Cloud-Dokumenten
Hinzufügen und Bearbeiten von Inhalten
Importieren, Exportieren und Speichern
1. Importieren
2. Creative Cloud-Bibliotheken in Illustrator
  1. Creative Cloud-Bibliotheken in Illustrator
3. Speichern und Exportieren
Drucken
1. Vorbereitung für den Druck
2. Drucken
Automatisieren von Aufgaben
Fehlerbehebung

Hier erfahren Sie, wie Sie CSS-Code für einzelne Objekte oder für das gesamte in Illustrator entworfene Layout extrahieren und exportieren können.

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

CSS-Code anzeigen und extrahieren

Das Bedienfeld CSS-Eigenschaften bietet Benutzern folgende Möglichkeiten:

Den CSS-Code für ausgewählte Objekte anzeigen und 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.

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. Menü des Bedienfelds „CSS-Eigenschaften“ G. In ausgewählten Objekten verwendete Stilelemente H. CSS-Code

Führen Sie die angegebenen Schritte aus, um den CSS-Code anzuzeigen und zu extrahieren:

Wählen Sie Fenster > CSS-Eigenschaften aus.

Hinweis:

Stellen Sie sicher, dass Objekte in Ihrem Illustrator-Dokument im Ebenenbedienfeld benannt sind.
So zeigen Sie den generierten CSS-Code an:

Für ein Objekt:

Wählen Sie ein Objekt aus. Der CSS-Code für das Objekt wird im Bedienfeld CSS-Eigenschaften angezeigt.

Für mehrere Objekte:

Halten Sie Umschalttaste gedrückt, wählen sie mehrere Objekte aus, und wählen Sie dann CSS-Code generieren im Bedienfeld CSS-Eigenschaften.

Für alle Objekte:

Drücken Sie STRG/CMD + A, um alle Objekte auszuwählen, und wählen Sie dann CSS-Code generieren im Bedienfeld CSS-Eigenschaften.
Führen Sie zum Abrufen des generierten CSS-Codes einen der folgenden Schritte aus:
So kopieren Sie den ausgewählten Code:

Wählen Sie einen bestimmten Code und wählen Sie dann Ausgewählten Stil kopieren, um ihn in die Zwischenablage zu kopieren.

Wählen Sie das Menü des Bedienfelds „CSS-Eigenschaften“ und wählen Sie Ausgewählte CSS exportieren , um den Code in eine Datei zu exportieren.

So kopieren Sie alle Codes:

Treffen Sie keine Auswahl im CSS-Code und wählen Sie dann Ausgewählten Stil kopieren, um ihn in die Zwischenablage zu kopieren.

Wählen Sie das Menü des Bedienfelds „CSS-Eigenschaften“ und wählen Sie Alle exportieren, um den Code in eine Datei zu exportieren.
Wählen Sie beim Speichern des CSS-Codes in einer Datei aus den Optionen im Dialogfeld CSS-Exportoptionen aus.

CSS-Exportoptionen

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: &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);
}

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

Zusätzliche Themen

Haben Sie eine Frage oder eine Idee?

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe Illustrator-Community. Wir würden uns freuen, von Ihnen zu hören.