Benutzerhandbuch Abbrechen

Extrahieren von CSS | Illustrator

Suchen
  1. Illustrator-Benutzerhandbuch
  2. Illustrator kennenlernen
    1. Einführung in Illustrator
      1. Neue Funktionen in Illustrator
      2. Häufige Fragen
      3. Systemanforderungen für Illustrator
      4. Illustrator für Apple-Chip
    2. Arbeitsbereich
      1. Arbeitsbereich – Grundlagen
      2. Schneller lernen mit dem Bedienfeld „Entdecken“ in Illustrator
      3. Dokumente erstellen
      4. Symbolleiste
      5. Standardtastaturbefehle
      6. Anpassen von Tastaturbefehlen
      7. Einführung in Zeichenflächen
      8. Zeichenflächen verwalten
      9. Anpassen des Arbeitsbereichs
      10. Eigenschaftenbedienfeld
      11. Festlegen von Voreinstellungen
      12. Touch-Arbeitsbereich
      13. Unterstützung des Microsoft Surface Dial in Illustrator
      14. Rückgängig machen von Änderungen und Verwalten des Design-Verlaufs
      15. Drehen der Ansicht
      16. Lineale, Raster und Hilfslinien
      17. Barrierefreiheit in Illustrator
      18. Abgesicherter Modus
      19. Anzeigen von Bildmaterial
      20. Verwenden der Touch Bar in Illustrator
      21. Dateien und Vorlagen
    3. Werkzeuge in Illustrator
      1. Werkzeuge-Überblick
      2. Auswahl-Werkzeuge
        1. Auswahl
        2. Direktauswahl
        3. Gruppenauswahl
        4. Zauberstab
        5. Lasso
        6. Zeichenfläche
      3. Navigieren-Werkzeuge
        1. Hand
        2. Drehen der Ansicht
        3. Zoom
      4. Malwerkzeuge
        1. Verlauf
        2. Raster
        3. Formerstellung
      5. Textwerkzeuge
        1. Text
        2. Pfadtext
        3. Vertikaler Text
      6. Zeichnen-Werkzeuge
        1. Zeichenstift
        2. Ankerpunkt hinzufügen
        3. Ankerpunkt löschen
        4. Ankerpunkt
        5. Krümmung
        6. Liniensegment
        7. Rechteck
        8. Abgerundetes Rechteck
        9. Ellipse
        10. Polygon
        11. Stern
        12. Pinsel
        13. Tropfenpinsel
        14. Schraffur
        15. Shaper
        16. Slice
      7. Änderungswerkzeuge
        1. Drehen
        2. Reflektieren
        3. Skalieren
        4. Verbiegen
        5. Breite
        6. Frei transformieren
        7. Pipette
        8. Angleichen
        9. Radiergummi
        10. Schere
    4. Schnellaktionen
      1. Retro-Text
      2. Neon-leuchtender Text
      3. Old School Text
      4. Neu färben
      5. Skizze in Vektor umwandeln
  3. Illustrator auf dem iPad
    1. Einführung in Illustrator auf dem iPad
      1. Illustrator auf dem iPad – Übersicht
      2. Häufige Fragen zu Illustrator auf dem iPad
      3. Systemanforderungen | Illustrator auf dem iPad
      4. Funktionsumfang von Illustrator auf dem iPad
    2. Arbeitsbereich
      1. Arbeitsbereich von Illustrator auf dem iPad
      2. Touch-Kurzbefehle und Gesten
      3. Tastaturbefehle für Illustrator auf dem iPad
      4. Verwalten von App-Einstellungen
    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
      1. Arbeiten mit Text und Schriftarten
      2. Erstellen von Text-Designs entlang eines Pfads
      3. Hinzufügen eigener Schriften
    7. Arbeiten mit Bildern
      1. Vektorisieren von Rasterbildern
    8. Farben
      1. Anwenden von Farben und Farbverläufen
  4. Cloud-Dokumente
    1. Grundlagen
      1. Arbeiten mit Illustrator-Cloud-Dokumenten
      2. Freigeben und gemeinsame Bearbeitung von Illustrator-Cloud-Dokumenten
      3. Dokumente fürs Review freigeben
      4. Upgraden des Cloud-Speicherplatzes für Adobe Illustrator
      5. Illustrator-Cloud-Dokumente | Häufige Fragen
    2. Fehlerbehebung
      1. Fehlerbehebung beim Erstellen oder Speichern von Problemen für Illustrator-Cloud-Dokumente
      2. Beheben von Problemen mit Illustrator-Cloud-Dokumenten
  5. Hinzufügen und Bearbeiten von Inhalten
    1. Zeichnen
      1. Zeichnen – Grundlagen
      2. Bearbeiten von Pfaden
      3. Zeichnen pixelgenauer Grafiken
      4. Zeichnen mit dem Zeichenstift-, Krümmungs- oder Buntstift-Werkzeug
      5. Zeichnen von einfachen Linien und Formen
      6. Bildnachzeichner
      7. Vereinfachen von Pfaden
      8. Definieren von Perspektivenrastern
      9. Symbol-Werkzeuge und Symbolsätze
      10. Anpassen von Pfadsegmenten
      11. Zeichnen einer Blume in fünf einfachen Schritten
      12. Perspektivisches Zeichnen
      13. Symbole
      14. Zeichnen von an Pixeln ausgerichteten Pfaden für Web-Workflows
    2. 3D-Objekte und -Materialien
      1. Grundlagen von 3D‑Effekten in Illustrator
      2. Erstellen von 3D‑Grafiken
      3. Zuordnen von Bildmaterial auf 3D-Objekte
      4. Erstellen von 3D-Text
      5. Erstellen von 3D-Objekten
    3. Farben
      1. Wissenswertes zu Farben
      2. Auswählen von Farben
      3. Verwenden und Erstellen von Farbfeldern
      4. Anpassen von Farben
      5. Verwenden des Bedienfelds „Adobe Color-Themen“
      6. Farbgruppen (Harmonien)
      7. Adobe Color-Themen-Bedienfeld
      8. Bildmaterial neu färben
    4. Malen
      1. Wissenswertes zum Malen
      2. Malen mit Flächen und Konturen
      3. Interaktive Malgruppen
      4. Verläufe
      5. Pinsel
      6. Transparenz und Füllmethoden
      7. Anwenden einer Kontur auf ein Objekt
      8. Erstellen und Bearbeiten von Mustern
      9. Raster
      10. Muster
    5. Auswählen und Anordnen von Objekten
      1. Auswählen von Objekten
      2. Ebenen
      3. Gruppieren und Umwandeln von Objekten
      4. Verschieben, Ausrichten und Verteilen von Objekten
      5. Übereinanderlegen von Objekten    
      6. Sperren, Ausblenden und Löschen von Objekten
      7. Kopieren und Duplizieren von Objekten
      8. Drehen und Spiegeln von Objekten
      9. Objekte verflechten
    6. Ändern der Form von Objekten
      1. Freistellen von Bildern
      2. Transformieren von Objekten
      3. Kombinieren von Objekten
      4. Ausschneiden, Aufteilen und Zuschneiden von Objekten
      5. Formraster
      6. Skalieren, Verbiegen und Verzerren von Objekten
      7. Angleichen von Objekten
      8. Verformen mit Hüllen
      9. Ändern der Form von Objekten mit Effekten
      10. Erstellen neuer Formen mit den Shaper- und Formerstellungswerkzeugen
      11. Verwenden von interaktiven Ecken
      12. Verbesserte Workflows zum Ändern von Formen mit Touch-Unterstützung
      13. Bearbeiten von Schnittmasken
      14. Interaktive Formen
      15. Erstellen von Formen mit dem Formerstellungswerkzeug
      16. Globale Bearbeitung
    7. Text
      1. Hinzufügen von Text und Arbeiten mit Textobjekten
      2. Erstellen von Aufzählungslisten und nummerierten Listen
      3. Verwalten des Textbereichs
      4. Schriftarten und Typografie
      5. Formatieren von Text
      6. Importieren und Exportieren von Text
      7. Formatieren von Absätzen
      8. Sonderzeichen
      9. Erstellen von Pfadtext
      10. Zeichen- und Absatzformate
      11. Registerkarten
      12. Suchen nach fehlenden Schriften (Typekit-Workflow)
      13. Arabische und hebräische Schrift
      14. Schriftarten | Häufige Fragen und Tipps zur Fehlerbehebung
      15. Erstellen eines 3D-Texteffekts
      16. Kreative Typografie-Designs
      17. Skalieren und Drehen von Text
      18. Zeilen- und Zeichenabstand
      19. Silbentrennung und Zeilenumbrüche
      20. Rechtschreibungs- und sprachspezifische Wörterbücher
      21. Formatieren asiatischer Zeichen
      22. Setzer für asiatische Schriften
      23. Erstellen von Textdesigns mit Angleichungsobjekten
      24. Erstellen eines Textposters mithilfe des Bildnachzeichners
    8. Erstellen von Spezialeffekten
      1. Arbeiten mit Effekten
      2. Grafikstile
      3. Aussehen-Attribute
      4. Erstellen von Zeichnungen und Mosaiken
      5. Schlagschatten, Schein und weiche Kanten
      6. Übersicht der Effekte
    9. Webgrafiken
      1. Empfehlungen zum Erstellen von Webgrafiken
      2. Diagramme
      3. SVG
      4. Slices und Imagemaps
  6. Importieren, Exportieren und Speichern
    1. Importieren
      1. Platzieren mehrerer Dateien
      2. Verwalten verknüpfter und eingebetteter Dateien
      3. Verknüpfungsinformationen
      4. Einbettung von Bildern aufheben
      5. Importieren von Bildmaterial aus Photoshop
      6. Importieren von Bitmap-Bildern
      7. Importieren von Adobe PDF-Dateien
      8. Importieren von EPS-, DCS- und AutoCAD-Dateien
    2. Creative Cloud-Bibliotheken in Illustrator 
      1. Creative Cloud-Bibliotheken in Illustrator
    3. Speichern
      1. Speichern von Grafiken
    4. Exportieren
      1. Verwenden von Illustrator-Grafiken in Photoshop
      2. Grafiken exportieren
      3. Sammeln von Elementen und Exportieren in Stapeln
      4. Dateien verpacken
      5. Erstellen von Adobe PDF-Dateien
      6. CSS extrahieren | Illustrator CC
      7. Adobe PDF-Optionen
      8. Bedienfeld „Dokumentinformationen“
  7. Drucken
    1. Vorbereitung für den Druck
      1. Einrichten von Dokumenten zum Drucken
      2. Ändern von Seitenformat und Ausrichtung
      3. Festlegen von Schnittmarken für das Zuschneiden oder Ausrichten
      4. Erste Schritte mit großen Arbeitsflächen
    2. Drucken
      1. Überdrucken
      2. Drucken mit Farbmanagement
      3. Drucken von PostScript-Dateien
      4. Druckvorgaben
      5. Druckermarken und Anschnitt
      6. Drucken und Speichern von transparentem Bildmaterial
      7. Überfüllen
      8. Drucken von Farbseparationen
      9. Drucken von Verläufen, Rastern und Farbübergängen
      10. Weiß überdrucken
  8. Automatisieren von Aufgaben
    1. Zusammenführen von Daten über das Variablenbedienfeld
    2. Automatisieren mit Skripten
    3. Automatisieren mit Aktionen
  9. Fehlerbehebung 
    1. Probleme beim Absturz
    2. Wiederherstellen von Dateien nach Absturz
    3. Dateiprobleme
    4. Unterstützte Dateiformate
    5. Probleme mit GPU-Gerätetreibern
    6. Probleme mit Wacom-Geräten
    7. Probleme mit DLL-Dateien
    8. Arbeitsspeicherprobleme
    9. Probleme mit der Voreinstellungendatei
    10. Schriftprobleme
    11. Druckerprobleme
    12. Absturzbericht an Adobe senden
    13. Leistung von Illustrator verbessern

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.
CSS-Eigenschaften-Code

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:

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

    Hinweis:

    Stellen Sie sicher, dass Objekte in Ihrem Illustrator-Dokument im Ebenenbedienfeld benannt sind.

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

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

  4. Wählen Sie beim Speichern des CSS-Codes in einer Datei aus den Optionen im Dialogfeld CSS-Exportoptionen aus.

    Dialogfeld für CSS-Export-Optionen
    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?

Fragen Sie die Community

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.

Adobe-Logo

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie