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

Extrahování CSS | Illustrator

Hledat
  1. Příručka uživatele aplikace Illustrator
  2. Seznamte se s aplikací Illustrator
    1. Úvod do aplikace Illustrator
      1. Co je nové v aplikaci Illustrator
      2. Časté dotazy
      3. Systémové požadavky aplikace Illustrator
      4. Illustrator pro zařízení s procesory Apple Silicon
    2. Pracovní plocha
      1. Základy práce s pracovní plochou
      2. Rychlejší učení s panelem Prohledávání aplikace Illustrator
      3. Vytváření dokumentů
      4. Panel nástrojů
      5. Výchozí klávesové zkratky
      6. Přizpůsobení klávesových zkratek
      7. Úvod ke kreslicím plátnům
      8. Správa kreslicích pláten
      9. Přizpůsobení pracovní plochy
      10. Panel Vlastnosti
      11. Nastavení předvoleb
      12. Dotyková pracovní plocha
      13. Podpora zařízení Microsoft Surface Dial v aplikaci Illustrator
      14. Vrácení úprav zpět a správa historie návrhu
      15. Otočení zobrazení
      16. Pravítka, mřížky a vodítka
      17. Usnadnění v aplikaci Illustrator
      18. Bezpečný režim
      19. Zobrazení kresby
      20. Používání panelu Touch Bar s aplikací Illustrator
      21. Soubory a předlohy
    3. Nástroje v aplikaci Illustrator
      1. Přehled nástrojů
      2. Nástroje pro výběr
        1. Výběr
        2. Přímý výběr
        3. Výběr skupiny
        4. Kouzelná hůlka
        5. Laso
        6. Kreslicí plátno
      3. Nástroje navigace
        1. Ruka
        2. Otočení zobrazení
        3. Lupa
      4. Nástroje pro malování
        1. Přechod
        2. Mřížka
        3. Vytváření tvaru
      5. Textové nástroje
        1. Text
        2. Text na cestě
        3. Svislý text
      6. Nástroje pro kreslení
        1. Pero
        2. Přidat kotevní bod
        3. Odstranit kotevní bod
        4. Kotevní bod
        5. Zakřivení
        6. Segment čáry
        7. Obdélník
        8. Zaoblený obdélník
        9. Elipsa
        10. Mnohoúhelník
        11. Hvězda
        12. Štětec
        13. Štětec kapka
        14. Tužka
        15. Shaper
        16. Řez
      7. Nástroje pro úpravu
        1. Otočit
        2. Odrážet
        3. Měřítko
        4. Střih
        5. Šířka
        6. Libovolná transformace
        7. Kapátko
        8. Prolnutí
        9. Guma
        10. Nůžky
    4. Rychlé akce
      1. Retro text
      2. Neonově zářící text
      3. Stará škola text
      4. Přebarvit
      5. Převedení skici na vektorovou kresbu
  3. Illustrator na iPadu
    1. Úvod do aplikace Illustrator na iPadu
      1. Přehled aplikace Illustrator pro iPad
      2. Časté dotazy k aplikaci Illustrator pro iPad
      3. Systémové požadavky | Illustrator pro iPad
      4. Co můžete dělat v aplikaci Illustrator na iPadu a co ne
    2. Pracovní plocha
      1. Illustrator na pracovní ploše iPad
      2. Dotykové zkratky a gesta
      3. Klávesové zkratky aplikace Illustrator pro iPad
      4. Správa nastavení aplikace
    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
      1. Práce s textem a písmy
      2. Vytvoření textových návrhů podél cesty
      3. Přidejte si vlastní písma
    7. Práce s obrázky
      1. Vektorizujte rastrové obrázky
    8. Barvy
      1. Použití barev a přechodů
  4. Dokumenty v cloudu
    1. Základní informace
      1. Práce s dokumenty v cloudu aplikace Illustrator
      2. Sdílejte a spolupracujte na dokumentech v cloudu Illustrator
      3. Sdílení dokumentů ke kontrole
      4. Rozšiřte své cloudové úložiště pro aplikaci Adobe Illustrator
      5. Dokumenty v cloudu aplikace Illustrator | Časté dotazy
    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
  5. Přidání a úpravy obsahu
    1. Kreslení
      1. Základy kreslení
      2. Úpravy cest
      3. Nakreslení pixelově dokonalé kresby
      4. Kreslení pomocí nástroje pero, zakřivení nebo tužka
      5. Kreslení jednoduchých čar a tvarů
      6. Vektorizace obrazu
      7. Zjednodušení cesty
      8. Definování perspektivních mřížek
      9. Nástroje pro práci se symboly a sady symbolů
      10. Úpravy segmentů cest
      11. Návrh květiny v 5 snadných krocích
      12. Perspektivní kreslení
      13. Symboly
      14. Kreslení cest zarovnaných podle obrazových bodů v pracovních postupech určených pro web
    2. 3D objekty a materiály
      1. Informace o 3D efektech v aplikaci Illustrator
      2. Vytvoření 3D grafiky
      3. Mapování kresby na 3D objekty
      4. Vytváření 3D textu
    3. Barvy
      1. O barvách
      2. Vybírání barev
      3. Používání a vytváření vzorků barev
      4. Přizpůsobení barev
      5. Používání panelu Motivy Adobe Color
      6. Barevné skupiny (harmonie)
      7. Panel Barevné motivy
      8. Přebarvení kresby
    4. Malování
      1. O malování
      2. Malba s výplněmi a tahy
      3. Skupiny živé malby
      4. Přechody
      5. Stopy štětce
      6. Průhlednost a režimy prolnutí
      7. Aplikace tahu na objekt
      8. Vytváření a úpravy vzorků
      9. Mřížky
      10. Vzorky
    5. Výběr a uspořádání objektů
      1. Vybírání objektů
      2. Vrstvy
      3. Seskupení a rozdělení objektů
      4. Přemístění, zarovnání a rozmístění objektů
      5. Překrývání objektů    
      6. Zamknutí, skrytí a odstranění objektů
      7. Kopírování a duplikování objektů
      8. Otočení a zrcadlení objektů
      9. Proplétání objektů
    6. Změna tvaru objektů
      1. Oříznutí obrazů
      2. Transformace objektů
      3. Kombinování objektů
      4. Vyjímání, rozdělování a ořezávání objektů
      5. Pokřivení loutky
      6. Změna velikosti, zkosení a deformování objektů
      7. Prolnutí objektů
      8. Změna tvaru s použitím obálek
      9. Změna tvaru objektů pomocí efektů
      10. Vytvářejte nové tvary pomocí nástroje Shaper a nástroje pro vytváření tvaru
      11. Práce s živými rohy
      12. Vylepšené pracovní postupy změny tvarů s podporou dotykového ovládání
      13. Úpravy ořezových masek
      14. Živé tvary
      15. Vytváření tvarů pomocí nástroje pro vytváření tvaru
      16. Globální úpravy
    7. Text
      1. Přidání textu a práce s textovými objekty
      2. Vytvoření seznamu s odrážkami a číslovaného seznamu
      3. Správa textové oblasti
      4. Písma a typografie
      5. Formátování textu
      6. Import a export textu
      7. Formátování odstavců
      8. Speciální znaky
      9. Vytvoření textu na cestě
      10. Znakové a odstavcové styly
      11. Záložky
      12. Text
      13. Nalezení chybějících písem (pracovní postup pro Typekit)
      14. Aktualizace textu z aplikace Illustrator 10
      15. Písma pro arabštinu a hebrejštinu
      16. Písma | Nejčastější dotazy a tipy pro řešení potíží
      17. Vytvoření efektu 3D textu
      18. Návrhy pro tvůrčí typografii
      19. Změna velikosti a natočení textu
      20. Mezery mezi řádky a znaky
      21. Dělení slov a zalamování řádků
      22. Vylepšení textu
      23. Slovníky pro kontrolu pravopisu
      24. Formátování asijských znaků
      25. Sazby pro asijská písma
      26. Vytváření textových návrhů s prolnutím objektů
      27. Vytvoření textového plakátu pomocí vektorizace obrazu
    8. Vytváření zvláštních efektů
      1. Práce s efekty
      2. Grafické styly
      3. Vytvoření vrženého stínu
      4. Atributy vzhledu
      5. Vytvoření skici nebo mozaiky
      6. Vržené stíny, záře a prolnutí okrajů
      7. Přehled efektů
    9. Webové grafiky
      1. Osvědčené postupy pro vytváření webových grafik
      2. Grafy
      3. SVG
      4. Vytváření animací
      5. Řezy a obrazové mapy
  6. Import, export a ukládání
    1. Importovat
      1. Umístění více souborů
      2. Správa propojených a vložených souborů
      3. Informace o vazbách
      4. Zrušení vložení obrazů
      5. Import kreseb z aplikace Photoshop
      6. Import bitmapových obrazů
      7. Import souborů Adobe PDF
      8. Import souborů EPS, DCS a AutoCAD
    2. Creative Cloud knihovny v aplikaci Illustrator 
      1. Creative Cloud knihovny v aplikaci Illustrator
    3. Uložit
      1. Ukládání kresby
    4. Export
      1. Používání kresby Illustrator v aplikaci Photoshop
      2. Export kresby
      3. Shromažďování zdrojů a hromadný export
      4. Sbalení souborů
      5. Vytváření souborů Adobe PDF
      6. Extrahování CSS | Illustrator CC
      7. Volby Adobe PDF
      8. Informace o souboru a metadata
  7. Tisk
    1. Příprava k tisku
      1. Nastavení dokumentů pro tisk
      2. Změna velikosti a orientace stránky
      3. Určení ořezových značek pro oříznutí nebo zarovnání
      4. Začínáme s velkým plátnem
    2. Tisk
      1. Přetisk tahu
      2. Tisk s použitím správy barev
      3. PostScriptový tisk
      4. Přednastavení tisku
      5. Tiskové značky a spadávky
      6. Tisk a ukládání průhledných kreseb
      7. Přesahy
      8. Tisk barevných výtažků
      9. Tisk přechodů, mřížek a barevných prolnutí
      10. Bílý přetisk
  8. Automatizace úloh
    1. Slučování dat pomocí panelu Proměnné
    2. Automatizace pomocí skriptů
    3. Automatizace pomocí akcí
  9. Řešení problémů 
    1. Chyby aplikace
    2. Obnovení souborů po zhroucení
    3. Problémy se soubory
    4. Podporované formáty souborů
    5. Problémy s ovladačem grafického zařízení
    6. Problémy se zařízením Wacom
    7. Problémy se soubory DLL
    8. Problémy s pamětí
    9. Problémy se souborem předvoleb
    10. Problémy s písmy
    11. Problémy s tiskárnou
    12. Sdílení hlášení o zhroucení se společností Adobe
    13. Zlepšení výkonu aplikace Illustrator

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č.
Kód vlastností 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. 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ě:

  1. Vyberte možnost Okno > Vlastnosti CSS.

    Poznámka:

    Ujistěte se, že jsou objekty v dokumentu Illustratoru pojmenovány v panelu Rozvržení.

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

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

  4. Při ukládání kódu CSS do souboru zvolte některou z možností v dialogovém okně Volby exportu do CSS.

    Dialogové okno 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: "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;
}

Související témata

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

Zeptejte se komunity

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.

Logo Adobe

Přihlaste se ke svému účtu.

Rychlé odkazy

Zobrazit všechny vaše plány Správa plánů

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