V Illustratoru lze vytvořit design pro stránku HTML. Slouží jako dobrý vizuální průvodce pro vývojáře webu, který pak může nakódovat rozvržení, styly a objekty na stránku v editoru HTML. Replikování přesně stejného vzhledu a pozice komponentů a objektů je však časově náročný a jednotvárný proces.

Pomocí aplikace Illustrator CC lze při tvorbě rozvržení pro stránku HTML také generovat a exportovat základní kód CSS, který určuje vzhled komponentů a objektů na stránce. CSS umožňuje kontrolovat vzhled text a objektů (podobně jako znakové a grafické styly). Můžete se rozhodnout exportovat kód CSS pro jednotlivé objekty, nebo pro celé rozvržení navržené v Illustratoru.   

Panel Vlastnosti CSS (Okno > Vlastnosti CSS) uživatelům umožní následující:

  • Zobrazit kód CSS pro vybrané objekty
  • Zkopírovat kód CSS pro vybrané objekty
  • Exportovat nejméně jeden nebo všechny vybrané prvky Illustratoru do souboru CSS
  • Exportovat použité rastrovatelné obrázky
  • Generovat kód CSS pro daný prohlížeč

Video: Extrahování CSS v aplikaci Illustrator CC

Video: Extrahování CSS v aplikaci Illustrator CC
Podívejte se, jak lze vytvářet webové stránky rychleji, umožníte-li, aby Illustrator CC vytvářel kód CSS za vás — pro text, objekty i celá rozvržení.
Rufus Deuchler

Zobrazení a extrahování kódu CSS

Poznámka:

Chcete-li generovat kód CSS, proveďte jeden z následujících kroků:

  • Ujistěte se, že jsou objekty v dokumentu Illustratoru pojmenovány v panelu Rozvržení.
  • Klikněte na Okno > Vlastnosti CSS > rozbalovací nabídka > Volby exportu a vyberte zaškrtávací políčko Generovat CSS pro nejmenované objekty. 

  1. Vyberte možnost Okno > Možnosti CSS.

    A. Upozornění na případ, kdy některé styly nelze převést na kód CSS B. Dialogové okno Volby exportu do CSS C. Export vybraného kódu CSS do souboru D. Kopírování vybraného stylu do schránky E. Generovat CSS F. Rozbalovací nabídka G. Styly použité ve vybraných objektech H. Kód CSS 
  2. V otevřeném dokumentu Illustratoru proveďte jeden z následujících kroků:

    • Vyberte jeden objekt. Kód CSS pro objekt se zobrazí v panelu Vlastnosti CSS.
    • Přidržte klávesu Shift, vyberte více objektů a poté klikněte na tlačítko Generovat CSS v panelu Vlastnosti CSS.
    • Stisknutím kláves Ctrl/Cmd + A vyberte všechny objekty a poté klikněte na tlačítko Generovat CSS v panelu Vlastnosti CSS.

    Zobrazí se vygenerovaný kód CSS.

  3. Chcete-li získat vygenerovaný kód CSS, proveďte jeden z následujících kroků:

    • Chcete-li vybraný kód zkopírovat, vyberte konkrétní kód, a poté:
      • Chcete-li kopírovat do schránky, klikněte na možnost Kopírovat vybraný styl
      • Chcete-li exportovat soubor, klikněte na rozbalovací nabídku a poté na možnost Exportovat vybraný CSS
    • Chcete-li zkopírovat celý kód, v kódu CSS nic nevybírejte, a poté:
      • Chcete-li kopírovat do schránky, klikněte na možnost Kopírovat vybraný styl
      • Chcete-li exportovat soubor, klikněte na rozbalovací nabídku a poté na možnost Exportovat vše
  4. Při ukládání souboru CSS do souboru vyberte z následujících možností:

    Poznámka:

    Chcete-li obsah vygenerovaného kódu CSS změnit, v panelu Vlastnosti CSS klikněte na možnost Volby exportu, a poté proveďte příslušné volby.

Příklad kódu CSS

Obdélník s použitým gradientem (všechny prohlížeče)

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

Obdélník s použitým gradientem (pouze prohlížeče se sadou webkit)

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

Více objektů

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

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online