Handboek Annuleren

CSS extraheren | Illustrator

Zoeken
Illustrator

Illustrator

Openen op het web
  1. Illustrator Handboek
  2. Kennismaken met Illustrator
    1. Inleiding tot Illustrator
      1. Nieuw in Illustrator
      2. Algemene vragen
      3. Systeemvereisten voor Illustrator
      4. Illustrator voor Apple silicon
      5. GPU-prestaties
    2. Werkruimte
      1. Basisbeginselen van de werkruimte
      2. Documenten maken
      3. Sneller leren met het deelvenster Ontdekken van Illustrator
      4. Workflows versnellen met de contextuele taakbalk
      5. Werkbalk
      6. Standaardsneltoetsen
      7. Sneltoetsen aanpassen
      8. Inleiding in tekengebieden
      9. Tekengebieden beheren
      10. De werkruimte aanpassen
      11. Deelvenster Eigenschappen
      12. Voorkeuren instellen
      13. Werkruimte voor aanraken
      14. Ondersteuning voor Microsoft Surface Dial in Illustrator
      15. Bewerkingen ongedaan maken en ontwerpgeschiedenis beheren
      16. Weergave draaien
      17. Linialen, rasters en hulplijnen
      18. Toegankelijkheid in Illustrator
      19. Illustraties weergeven
      20. De Touch Bar gebruiken met Illustrator
      21. Bestanden en sjablonen
    3. Gereedschappen in Illustrator
      1. Overzicht van gereedschappen
      2. Selectiegereedschappen
        1. Selectie
        2. Direct selecteren
        3. Groep selecteren
        4. Toverstaf
        5. Lasso
        6. Tekengebied
      3. Navigatiegereedschappen
        1. Handje
        2. Weergave draaien
        3. Zoomen
      4. Schildergereedschappen
        1. Verloop
        2. Net
        3. Vormen maken
      5. Tekstgereedschappen
        1. Tekst
        2. Tekst op een pad
        3. Verticale tekst
      6. Tekengereedschappen
        1. Pen
        2. Ankerpunt-toevoegen
        3. Ankerpunt verwijderen
        4. Ankerpunt
        5. Kromming
        6. Lijnsegment
        7. Rechthoek
        8. Afgeronde rechthoek
        9. Ovaal
        10. Veelhoek
        11. Ster
        12. Penseel
        13. Klodderpenseel
        14. Potlood
        15. Shaper
        16. Segment
      7. Bewerkingsgereedschappen
        1. Roteren
        2. Spiegelen
        3. Schalen
        4. Schuin
        5. Breedte
        6. Vrije transformatie
        7. Pipet
        8. Overvloeien
        9. Gummetje
        10. Schaar
        11. Meetgereedschap
    4. Generatieve AI (niet beschikbaar op het vasteland van China)
      1. Scènes, onderwerpen en pictogrammen genereren met behulp van opdrachten
      2. Vectorpatronen genereren met behulp van opdrachten
      3. Vullingen voor vectorvormen genereren met behulp van opdrachten
      4. De kleuren in uw illustraties aanpassen met opdrachten
    5. Snelle actie
      1. Retro tekst
      2. Tekst met neon gloed
      3. Ouderwetse tekst
      4. Opnieuw kleuren
      5. Schetsen omzetten in vectoren
  3. Illustrator op de iPad
    1. Inleiding in Illustrator op de iPad
      1. Overzicht van Illustrator op de iPad
      2. Veelgestelde vragen over Illustrator op de iPad
      3. Systeemvereisten | Illustrator op de iPad
      4. Wat u wel of niet kunt doen in Illustrator op de iPad
    2. Werkruimte
      1. De werkruimte van Illustrator op de iPad
      2. Snelknoppen en bewegingen
      3. Sneltoetsen voor Illustrator op de iPad
      4. Uw app-instellingen beheren
    3. Documenten
      1. Werken met documenten in Illustrator op de iPad
      2. Photoshop- en Fresco-documenten importeren
    4. Objecten selecteren en rangschikken
      1. Herhaalde objecten maken
      2. Objecten laten overvloeien
    5. Tekenen
      1. Paden tekenen en bewerken
      2. Vormen tekenen en bewerken
    6. Tekst
      1. Werken met tekst en lettertypen
      2. Tekstontwerpen langs een pad maken
      3. Uw eigen lettertypen toevoegen
    7. Werken met afbeeldingen
      1. Rasterafbeeldingen omzetten in vectoren
    8. Kleur
      1. Kleuren en verlopen toepassen
  4. Clouddocumenten
    1. Basisbeginselen
      1. Werken met Illustrator-clouddocumenten
      2. Illustrator-clouddocumenten delen en eraan samenwerken
      3. Documenten ter beoordeling delen
      4. Cloudopslag voor Adobe Illustrator upgraden
      5. Illustrator-clouddocumenten | Algemene vragen
    2. Problemen oplossen
      1. Problemen met het maken of opslaan van clouddocumenten in Illustrator oplossen
      2. Problemen met clouddocumenten in Illustrator oplossen
  5. Inhoud toevoegen en bewerken
    1. Tekenen
      1. Basisbeginselen van tekenen
      2. Paden bewerken
      3. Pixel-perfecte illustraties tekenen
      4. Tekenen met de pen, het potlood of het gereedschap Kromming
      5. Eenvoudige lijnen en vormen tekenen
      6. Rechthoekige rasters en poolrasters tekenen
      7. Flakkeringen tekenen en bewerken
      8. Afbeeldingen overtrekken
      9. Een pad vereenvoudigen
      10. Symboolgereedschappen en symboolsets
      11. Padsegmenten aanpassen
      12. Een bloem ontwerpen in 5 eenvoudige stappen
      13. Een perspectiefraster maken en bewerken
      14. Objecten op een perspectiefraster tekenen en wijzigen
      15. Objecten gebruiken als symbolen voor herhaald gebruik
      16. Paden met pixeluitlijning tekenen voor webworkflows
    2. Metingen
      1. Afmetingen meten en weergeven
    3. 3D-objecten en materialen
      1. Over 3D-effecten in Illustrator
      2. 3D-afbeeldingen maken
      3. Illustraties toewijzen aan 3D-objecten
      4. 3D-tekst maken
      5. 3D-objecten maken
    4. Kleur
      1. Kleuren
      2. Kleuren selecteren
      3. Stalen gebruiken en maken
      4. Kleuren aanpassen
      5. Het deelvenster Adobe Color-thema's gebruiken
      6. Kleurgroepen (harmonieën)
      7. Deelvenster Kleurthema's
      8. Illustraties opnieuw kleuren
    5. Schilderen
      1. Informatie over schilderen
      2. Schilderen met vullingen en lijnen
      3. Groepen van Actieve verf
      4. Verlopen
      5. Penselen
      6. Transparantie- en overvloeiingsmodi
      7. Lijnen toepassen op een object
      8. Patronen maken en bewerken
      9. Netten
      10. Patronen
    6. Objecten selecteren en rangschikken
      1. Objecten selecteren
      2. Lagen
      3. Objecten uitbreiden, groeperen en degroeperen
      4. Objecten verplaatsen, uitlijnen en verdelen
      5. Objecten op een pad uitlijnen, rangschikken en verplaatsen
      6. Objecten magnetisch uitlijnen met glyphs
      7. Objecten uitlijnen met Japanse glyphs
      8. Objecten stapelen    
      9. Objecten vergrendelen, verbergen en verwijderen
      10. Objecten kopiëren en dupliceren
      11. Objecten roteren en spiegelen
      12. Objecten verstrengelen
      13. Realistische mock-ups maken
    7. Objecten omvormen
      1. Afbeeldingen uitsnijden
      2. Objecten transformeren
      3. Objecten combineren
      4. Objecten knippen, splitsen en verkleinen
      5. Marionet verdraaien
      6. Objecten schalen, schuintrekken en vervormen
      7. Objecten laten overvloeien
      8. Omvormen met omhulsels
      9. Objecten omvormen met effecten
      10. Nieuwe vormen maken met de gereedschappen Shaper en Vormen maken
      11. Werken met actieve hoeken
      12. Verbeterde workflows voor omvormen met ondersteuning voor aanraking
      13. Uitknipmaskers bewerken
      14. Actieve vormen
      15. Vormen maken met het gereedschap Vormen maken
      16. Algemene bewerking
    8. Tekst
      1. Tekst toevoegen en werken met tekstobjecten
      2. Reflow-viewer
      3. Genummerde lijsten en lijsten met opsommingstekens maken
      4. Tekstgebied beheren
      5. Lettertypen en typografie
      6. Tekst in afbeeldingen omzetten in bewerkbare tekst
      7. Basisopmaak toevoegen aan tekst
      8. Geavanceerde opmaak toevoegen aan tekst
      9. Tekst importeren en exporteren
      10. Alinea's opmaken
      11. Speciale tekens
      12. Tekst op een pad maken
      13. Teken- en alineastijlen
      14. Tabs
      15. Ontbrekende lettertypen toevoegen vanuit Adobe Fonts
      16. Arabische en Hebreeuwse tekst
      17. Lettertypen | Veelgestelde vragen en tips voor probleemoplossing
      18. Creatieve typografische ontwerpen
      19. Tekst schalen en roteren
      20. Regelafstand en tekenafstand
      21. Woordafbreking en regeleinden
      22. Spelling- en taalwoordenboeken
      23. Aziatische tekens opmaken
      24. Composers voor Aziatische schriften
      25. Tekstontwerpen maken met overvloeiobjecten
      26. Een tekstposter maken met Afbeeldingen overtrekken
    9. Speciale effecten maken
      1. Werken met effecten
      2. Afbeeldingsstijlen
      3. Vormgevingskenmerken
      4. Schetsen en mozaïeken maken
      5. Slagschaduw, gloed en doezeleffect
      6. Overzicht van effecten
    10. Webafbeeldingen
      1. Aanbevolen procedures voor het maken van webafbeeldingen
      2. Grafieken
      3. SVG
      4. Segmenten en afbeeldingen met hyperlinks
  6. Importeren, exporteren en opslaan
    1. Importeren
      1. Meerdere bestanden plaatsen
      2. Gekoppelde en ingesloten bestanden beheren
      3. Informatie over koppelingen
      4. Het insluiten van afbeeldingen ongedaan maken
      5. Afbeeldingen importeren uit Photoshop
      6. Bitmapafbeeldingen importeren
      7. Adobe PDF-bestanden importeren
      8. EPS-, DCS- en AutoCAD-bestanden importeren
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Opslaan en exporteren
      1. Illustraties opslaan
      2. Een illustratie exporteren
      3. Adobe PDF-bestanden maken
      4. Adobe PDF-opties
      5. Illustrator-illustraties gebruiken in Photoshop
      6. Assets verzamelen en exporteren in batches
      7. Bestanden in een pakket opnemen
      8. CSS extraheren | Illustrator CC
      9. Deelvenster Documentinfo
  7. Afdrukken
    1. Voorbereiden op afdrukken
      1. Documenten instellen voor afdrukken
      2. Het paginaformaat en de afdrukstand wijzigen
      3. Snijtekens opgeven voor bijsnijden of uitlijnen
      4. Aan de slag met een groot canvas
    2. Afdrukken
      1. Overdrukken
      2. Afdrukken met kleurbeheer
      3. Afdrukken met PostScript
      4. Afdrukvoorinstellingen
      5. Drukkersmarkeringen en afloopgebieden
      6. Transparante illustraties afdrukken en opslaan
      7. Overvullen
      8. Kleurscheidingen afdrukken
      9. Verlopen, netten en kleurovervloeiingen afdrukken
      10. Witte overdruk
  8. Taken automatiseren
    1. Gegevens samenvoegen met behulp van het deelvenster Variabelen
    2. Automatiseren met behulp van scripts
    3. Automatiseren met behulp van handelingen
  9. Problemen oplossen 
    1. Opgeloste problemen
    2. Bekende problemen
    3. Crashproblemen
    4. Bestanden herstellen na een crash
    5. Veilige modus
    6. Problemen met bestanden
    7. Ondersteunde bestandsindelingen
    8. Problemen met GPU-stuurprogramma's
    9. Problemen met Wacom-apparaten
    10. Problemen met DLL-bestanden
    11. Geheugenproblemen
    12. Problemen met voorkeurenbestanden
    13. Lettertypeproblemen
    14. Printerproblemen
    15. Foutrapport delen met Adobe
    16. De prestaties van Illustrator verbeteren

Ontdek hoe u CSS-code extraheert en exporteert voor afzonderlijke objecten of voor de volledige lay-out die in Illustrator is ontworpen.

U kunt het ontwerp voor een HTML-pagina in Illustrator maken. Dit fungeert als een goede visuele richtlijn voor een webontwikkelaar, die vervolgens de lay-out, stijlen en objecten in een pagina in een HTML-editor kan coderen. Het repliceren van de exacte vormgeving en de exacte positie van componenten en objecten kan echter een tijdrovend en vervelend proces zijn.

Met Illustrator kunt u, wanneer u de lay-out voor een HTML-pagina maakt, de onderliggende CSS die de vormgeving van de componenten en objecten op de pagina bepaalt, genereren en exporteren. Met CSS hebt u controle over de vormgeving van tekst en objecten (vergelijkbaar met teken- en afbeeldingsstijlen).   

CSS-code weergeven en extraheren

Met het deelvenster CSS-eigenschappen kunnen gebruikers het volgende doen:

  • De CSS-code voor geselecteerde objecten weergeven en kopiëren.
  • Eén, meerdere of alle geselecteerde Illustrator-elementen exporteren naar een CSS-bestand.
  • Gebruikte rasterbare afbeeldingen exporteren.
  • Browserspecifieke CSS-code genereren.
Code in CSS-eigenschappen

A. Waarschuwing: als sommige stijlen niet naar CSS-code kunnen worden geconverteerd B. Dialoogvenster CSS-exportopties C. Geselecteerde CSS exporteren naar bestand D. Geselecteerde stijl kopiëren naar het klembord E. CSS genereren F. Menu deelvenster CSS-eigenschappen G. Stijlen die in de geselecteerde objecten worden gebruikt H. CSS-code 

Volg de gegeven stappen om de CSS-code te bekijken en te extraheren:

  1. Selecteer Venster > CSS-eigenschappen.

    Opmerking:

    Zorg ervoor dat de objecten in uw Illustrator-document een naam hebben in het deelvenster Lagen.

  2. Bekijk de gegenereerde code:

    Voor één object:

    Selecteer één object. De CSS-code voor het object wordt weergegeven in het deelvenster CSS-eigenschappen.

    Voor meerdere objecten:

    Houd Shift ingedrukt, selecteer meerdere objecten en selecteer vervolgens CSS genereren in het deelvenster CSS-eigenschappen.

    Voor alle objecten:

    Druk op Ctrl/Cmd + A om alle objecten te selecteren en selecteer vervolgens CSS genereren in het deelvenster CSS-eigenschappen.

  3. Voer een van de volgende stappen uit om de gegenereerde code te kopiëren:

    De geselecteerde code kopiëren:

    • Selecteer een specifieke code en selecteer Geselecteerde stijl kopiëren om deze naar het klembord te kopiëren.
    • Selecteer het menu van het deelvenster CSS-eigenschappen   en selecteer Geselecteerde CSS exporteren om te exporteren naar een bestand.

    Alle codes kopiëren:

    • Maak geen selectie in de CSS-code en selecteer Geselecteerde stijl kopiëren om deze naar het klembord te kopiëren.
    • Selecteer het menu van het deelvenster CSS-eigenschappen   en selecteer Alles exporteren om te exporteren naar een bestand.

  4. Kies tijdens het opslaan van CSS-code naar een bestand uit de opties in het dialoogvenster CSS-exportopties.

    Dialoogvenster CSS-exportopties
    CSS-exportopties

Voorbeeld-CSS-code

Rechthoek met een toegepast verloop (alle browsers)

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

Rechthoek met een toegepast verloop (alleen op webkit gebaseerde browsers)

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

Meerdere objecten

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

Verwante onderwerpen

Hebt u een vraag of idee?

Vraag het aan de community

Als u een vraag wilt stellen of een idee wilt delen, sluit u dan aan bij de Adobe Illustrator-community. We horen graag van u.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren
Snelle koppelingen weergeven
Snelle koppelingen verbergen

Juridische kennisgeving    |    Online privacybeleid