Wählen Sie Fenster > CSS-Eigenschaften aus.
Zuletzt aktualisiert am
17. November 2022
- Illustrator-Benutzerhandbuch
- Illustrator kennenlernen
- Einführung in Illustrator
- Arbeitsbereich
- Arbeitsbereich – Grundlagen
- Erstellen von Dokumenten
- Schneller Zugriff auf Trainingsinhalte über das Bedienfeld „Entdecken“ von Illustrator
- Beschleunigen von Workflows mit der kontextbezogenen Taskleiste
- Symbolleiste
- Standardtastaturbefehle
- Anpassen von Tastaturbefehlen
- Einführung in Zeichenflächen
- Zeichenflächen verwalten
- Anpassen des Arbeitsbereichs
- Eigenschaftenbedienfeld
- Festlegen von Voreinstellungen
- Touch-Arbeitsbereich
- Unterstützung des Microsoft Surface Dial in Illustrator
- Rückgängig machen von Änderungen und Verwalten des Design-Verlaufs
- Drehen der Ansicht
- Lineale, Raster und Hilfslinien
- Barrierefreiheit in Illustrator
- Anzeigen von Bildmaterial
- Verwenden der Touch Bar in Illustrator
- Dateien und Vorlagen
- Werkzeuge in Illustrator
- Werkzeuge-Überblick
- Auswahl-Werkzeuge
- Navigieren-Werkzeuge
- Malwerkzeuge
- Textwerkzeuge
- Zeichnen-Werkzeuge
- Änderungswerkzeuge
- Generative KI (nicht verfügbar in Festlandchina)
- Häufig gestellte Fragen zu generativen KI-Funktionen in Illustrator
- Generieren von Szenen, Motiven und Symbolen mit Text-Prompts
- Generieren von Vektormustern mit Text-Prompts
- Generieren von Vektorformfüllungen mit Text-Prompts
- Generieren von Grafiken, um Grafiken zu erweitern und Anschnittbereiche zu füllen
- Neufärben von Grafiken mit Text-Prompts
- Schnellaktionen
- Illustrator auf dem iPad
- Einführung in Illustrator auf dem iPad
- Arbeitsbereich
- Dokumente
- Auswählen und Anordnen von Objekten
- Zeichnen
- Text
- Arbeiten mit Bildern
- Farben
- Cloud-Dokumente
- Grundlagen
- Fehlerbehebung
- Hinzufügen und Bearbeiten von Inhalten
- Zeichnen
- Zeichnen – Grundlagen
- Bearbeiten von Pfaden
- Zeichnen pixelgenauer Grafiken
- Zeichnen mit dem Zeichenstift- oder Buntstift-Werkzeug und dem Kurvenzeichner
- Zeichnen von einfachen Linien und Formen
- Zeichnen rechteckiger und radialer Raster
- Zeichnen und Bearbeiten von Blendenflecken
- Nachzeichnen von Bildern
- Vereinfachen von Pfaden
- Symbol-Werkzeuge und Symbolsätze
- Anpassen von Pfadsegmenten
- Zeichnen einer Blume in fünf einfachen Schritten
- Erstellen und Bearbeiten eines Perspektivenrasters
- Zeichnen und Ändern von Objekten in einem Perspektivenraster
- Verwenden von Objekten als Symbole für die mehrfache Verwendung
- Zeichnen von an Pixeln ausgerichteten Pfaden für Web-Workflows
- Bemaßung
- 3D-Objekte und -Materialien
- Farben
- Malen
- Auswählen und Anordnen von Objekten
- Auswählen von Objekten
- Ebenen
- Erweitern, Gruppieren und Aufheben der Gruppierung von Objekten
- Verschieben, Ausrichten und Verteilen von Objekten
- Ausrichten, Anordnen und Verschieben von Objekten auf einem Pfad
- Ausrichten von Objekten an einer Glyphe
- Ausrichten von Objekten an einer japanischen Glyphe
- Übereinanderlegen von Objekten
- Sperren, Ausblenden und Löschen von Objekten
- Kopieren und Duplizieren von Objekten
- Drehen und Spiegeln von Objekten
- Objekte verflechten
- Erstellen realistischer Modelle
- Ändern der Form von Objekten
- Freistellen von Bildern
- Transformieren von Objekten
- Kombinieren von Objekten
- Ausschneiden, Aufteilen und Zuschneiden von Objekten
- Formraster
- Skalieren, Verbiegen und Verzerren von Objekten
- Angleichen von Objekten
- Verformen mit Hüllen
- Ändern der Form von Objekten mit Effekten
- Erstellen neuer Formen mit den Shaper- und Formerstellungswerkzeugen
- Verwenden von interaktiven Ecken
- Verbesserte Workflows zum Ändern von Formen mit Touch-Unterstützung
- Bearbeiten von Schnittmasken
- Interaktive Formen
- Erstellen von Formen mit dem Formerstellungswerkzeug
- Globale Bearbeitung
- Text
- Hinzufügen von Text und Arbeiten mit Textobjekten
- Hinzufügen grundlegender Formatierungen zu Text
- Häufige Fragen zu Schriftarten in Illustrator
- Schriften und Typografie
- Erstellen von Pfadtext
- Erstellen von Aufzählungslisten und nummerierten Listen
- Verwalten des Textbereichs
- Hinzufügen erweiterter Formatierungen zu Text
- Formatieren von Absätzen
- Zeichen- und Absatzformate
- Sonderzeichen
- Registerkarten
- Skalieren und Drehen von Text
- Zeilen- und Zeichenabstand
- Silbentrennung und Zeilenumbrüche
- Rechtschreibungs- und sprachspezifische Wörterbücher
- Formatieren von asiatischen Schriftzeichen
- Arabische und hebräische Schrift
- Setzer für asiatische Schriften
- Reflow-Ansicht
- Vorschau, Hinzufügen oder Ersetzen fehlender Schriften
- Importieren und Exportieren von Text
- Erkennen von Schriften in Bildern oder anhand von Textkonturen
- Kreative Typografie-Designs
- Erstellen von Textdesigns mit Angleichungsobjekten
- Erstellen eines Textposters mithilfe des Bildnachzeichners
- Erstellen von Spezialeffekten
- Webgrafiken
- Zeichnen
- Importieren, Exportieren und Speichern
- Importieren
- Creative Cloud-Bibliotheken in Illustrator
- Speichern und Exportieren
- Drucken
- Vorbereitung für den Druck
- Automatisieren von Aufgaben
- Fehlerbehebung
- Behobene Probleme
- Bekannte Probleme
- Probleme mit Abstürzen
- Wiederherstellen von Dateien nach Absturz
- Reparieren beschädigter Dokumente
- Abgesicherter Modus
- Dateiprobleme
- Unterstützte Dateiformate
- Probleme mit GPU-Gerätetreibern
- GPU-Leistungsprobleme
- Probleme mit Wacom-Geräten
- Probleme mit DLL-Dateien
- Arbeitsspeicherprobleme
- Probleme mit der Voreinstellungendatei
- Schriftprobleme
- Druckerprobleme
- Medienprobleme
- Probleme mit fehlenden Plug-ins
- Absturzbericht an Adobe senden
- Anwenden von Effekten in Illustrator nicht möglich
- Verbessern der Performance von Illustrator
- Behobene Probleme
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:
-
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-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: "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;
}
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.
