CSS extrahieren | Illustrator CC

Suchen
Adobe Illustrator Benutzerhandbuch

Auf dieser Seite

Gilt für: Adobe Illustrator

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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