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. Erstellen von Dokumenten
      3. Werkzeuge
      4. Standardtastaturbefehle
      5. Anpassen von Tastaturbefehlen
      6. Einführung in Zeichenflächen
      7. Zeichenflächen verwalten
      8. Anpassen des Arbeitsbereichs
      9. Eigenschaftenbedienfeld
      10. Festlegen von Voreinstellungen
      11. Touch-Arbeitsbereich
      12. Unterstützung des Microsoft Surface Dial in Illustrator
      13. Wiederherstellen, Rückgängigmachen und Automatisierung
      14. Drehen der Ansicht
      15. Lineale, Raster und Hilfslinien
      16. Barrierefreiheit in Illustrator
      17. Abgesicherter Modus
      18. Anzeigen von Bildmaterial
      19. Verwenden der Touch Bar in Illustrator
      20. Dateien und Vorlagen
      21. Synchronisieren von Einstellungen über Adobe Creative Cloud
    3. Werkzeuge in Illustrator
      1. Auswahl
        1. Übersicht
        2. Auswahl
        3. Direktauswahl
        4. Lasso
        5. Zeichenfläche
      2. Navigation
        1. Übersicht
        2. Zoom
        3. Drehen der Ansicht
      3. Farbe
        1. Übersicht
        2. Verlauf
        3. Formerstellung
      4. Text
        1. Übersicht
        2. Text
        3. Pfadtext
  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. Upgraden des Cloud-Speicherplatzes für Adobe Illustrator
      4. 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-Effekte und Adobe Substance-Materialien
      1. Grundlagen von 3D‑Effekten in Illustrator
      2. Erstellen von 3D‑Grafiken
      3. Mapping von Grafiken auf 3D-Objekte
      4. Erstellen von 3D-Objekten
      5. Erstellen von 3D-Text
    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-Schemata“
      6. Farbgruppen (Harmonien)
      7. Color-Schemata-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. Gitter
      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. Duplizieren von Objekten
      8. Drehen und Spiegeln von Objekten
    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. Formgitter
      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. Verwalten des Textbereichs
      3. Schriftarten und Typografie
      4. Formatieren von Text
      5. Importieren und Exportieren von Text
      6. Formatieren von Absätzen
      7. Sonderzeichen
      8. Erstellen von Pfadtext
      9. Zeichen- und Absatzformate
      10. Registerkarten
      11. Text und Schrift
      12. Suchen von fehlenden Schriftarten (Typekit-Workflow)
      13. Aktualisieren von Text aus Illustrator 10
      14. Arabische und hebräische Schrift
      15. Schriftarten | Häufige Fragen und Tipps zur Fehlerbehebung
      16. Erstellen eines 3D-Texteffekts
      17. Kreative Typografie-Designs
      18. Skalieren und Drehen von Text
      19. Zeilen- und Zeichenabstand
      20. Silbentrennung und Zeilenumbrüche
      21. Textverbesserungen
      22. Rechtschreibungs- und sprachspezifische Wörterbücher
      23. Formatieren asiatischer Zeichen
      24. Setzer für asiatische Schriften
      25. Erstellen von Textdesigns mit Angleichungsobjekten
      26. Erstellen eines Textposters mithilfe des Bildnachzeichners
    8. Erstellen von Spezialeffekten
      1. Arbeiten mit Effekten
      2. Grafikstile
      3. Erstellen von Schlagschatten
      4. Aussehen-Attribute
      5. Erstellen von Zeichnungen und Mosaiken
      6. Schlagschatten, Schein und weiche Kanten
      7. Übersicht der Effekte
    9. Webgrafiken
      1. Empfehlungen zum Erstellen von Webgrafiken
      2. Diagramme
      3. SVG
      4. Erstellen von Animationen
      5. Slices und Imagemaps
  6. Importieren, Exportieren und Speichern
    1. Importieren
      1. Importieren von Bildmaterialdateien
      2. Importieren von Bitmap-Bildern
      3. Importieren von Bildmaterial aus Photoshop
      4. Platzieren mehrerer Dateien | Illustrator CC
      5. Einbettung von Bildern aufheben
      6. Importieren von Adobe PDF-Dateien
      7. Importieren von EPS-, DCS- und AutoCAD-Dateien
      8. Verknüpfungsinformationen
    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. Dateiinformationen und Metadaten
  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, Gittern 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. Probleme mit GPU-Gerätetreibern
    5. Probleme mit Wacom-Geräten
    6. Probleme mit DLL-Dateien
    7. Arbeitsspeicherprobleme
    8. Probleme mit der Voreinstellungendatei
    9. Schriftprobleme
    10. Druckerprobleme
    11. Absturzbericht an Adobe senden

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

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.

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

    CSS-Exportoptionen

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

Bei Ihrem Konto anmelden

Hilfreiche Links

Alle Ihre Abos anzeigen Abos verwalten

Rechtliche Hinweise    |    Online-Datenschutzrichtlinie