Příručka uživatele Zrušit

Extrahování CSS | Illustrator

Hledat

Naposledy aktualizováno 25. 5. 2023

Příručka uživatele aplikace Illustrator
Seznamte se s aplikací Illustrator
1. Úvod do aplikace Illustrator
2. Pracovní plocha
3. Nástroje v aplikaci Illustrator
  1. Přehled nástrojů
  2. Nástroje pro výběr
  3. Nástroje navigace
  4. Nástroje pro malování
  5. Textové nástroje
  6. Nástroje pro kreslení
  7. Nástroje pro úpravu
    1. Otáčení
    2. Zrcadlení
    3. Měřítko
    4. Střih
    5. Šířka
    6. Libovolná transformace
    7. Kapátko
    8. Prolnutí
    9. Guma
    10. Nůžky
    11. Rozměr
4. Generativní AI (není k dispozici v kontinentální Číně)
5. Rychlé akce
Illustrator pro iPad
1. Úvod do aplikace Illustrator na iPadu
2. Pracovní plocha
3. Dokumenty
  1. Práce s dokumenty v aplikaci Illustrator pro iPad
  2. Import dokumentů aplikace Photoshop a Fresco
4. Výběr a uspořádání objektů
  1. Vytvoření opakujících se objektů
  2. Prolnutí objektů
5. Kreslení
  1. Kreslení a úpravy cest
  2. Kreslení a úpravy tvarů
6. Text
7. Práce s obrázky
  1. Vektorizace rastrových obrázků
8. Barvy
  1. Použití barev a přechodů
Dokumenty v cloudu
1. Základní informace
2. Řešení problémů
  1. Odstraňování problémů s vytvářením nebo ukládáním dokumentů aplikace Illustrator v cloudu
  2. Odstraňování problémů s dokumenty aplikace Illustrator v cloudu
Přidání a úpravy obsahu
Import, export a ukládání
1. Import
2. Creative Cloud knihovny v aplikaci Illustrator
  1. Creative Cloud knihovny v aplikaci Illustrator
3. Ukládání a export
Tisk
1. Příprava k tisku
2. Tisk
Automatizace úloh
Řešení problémů

Zjistěte, jak extrahovat a exportovat kód CSS pro jednotlivé objekty, nebo pro celé rozvržení navržené v aplikaci Illustrator.

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 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 textu a objektů (podobně jako znakové a grafické styly).

Zobrazení a extrahování kódu CSS

Panel Vlastnosti CSS umožňuje uživatelům provádět následující akce:

Zobrazit a 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č.

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. Nabídka na panelu Vlastnosti CSS G. Styly použité ve vybraných objektech H. Kód CSS

Pokud budete chtít zobrazit a extrahovat kód CSS, postupujte následovně:

Vyberte možnost Okno > Vlastnosti CSS.

Poznámka:

Ujistěte se, že jsou objekty v dokumentu Illustratoru pojmenovány v panelu Rozvržení.
Zobrazení vygenerovaného kódu CSS:

Pro jeden objekt:

Vyberte jeden objekt. Kód CSS pro objekt se zobrazí na panelu Vlastnosti CSS.

Pro více objektů:

Přidržte klávesu Shift, vyberte více objektů a poté vyberte možnost Generovat CSS na panelu Vlastnosti CSS.

Pro všechny objekty:

Stisknutím kláves Ctrl/Cmd + A vyberte všechny objekty a vyberte možnost Generovat CSS na panelu Vlastnosti CSS.
Chcete-li získat vygenerovaný kód CSS, proveďte jeden z následujících kroků:
Kopírování vybraného kódu:

Označte konkrétní kód a výběrem možnosti Kopírovat vybraný styl jej zkopírujte do schránky.

Vyberte nabídku Panel vlastností CSS a výběrem možnosti Exportovat vybrané CSS jej exportujte do souboru.

Zkopírování všech kódů:

U kódu CSS nic neoznačujte a výběrem možnosti Kopírovat vybraný styl jej zkopírujte do schránky.

Vyberte nabídku Panel vlastností CSS a výběrem možnosti Exportovat vše vše exportujte do souboru.
Při ukládání kódu CSS do souboru zvolte některou z možností v dialogovém okně Volby exportu do CSS.

Volby exportu do CSS

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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)&quot;;
  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;
}

Související témata

Máte nějaký dotaz nebo nápad?

Pokud máte dotaz nebo se chcete podělit o svůj nápad, zapojte se do komunity aplikace Adobe Illustrator. Budeme rádi za každou vaši reakci.

Získejte pomoc rychleji a snáze

Nový uživatel?