Handboek Annuleren

CSS extraheren | Illustrator

Zoeken
  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
    2. Werkruimte
      1. Basisbeginselen van de werkruimte
      2. Documenten maken
      3. Werkbalk
      4. Standaardsneltoetsen
      5. Sneltoetsen aanpassen
      6. Inleiding in tekengebieden
      7. Tekengebieden beheren
      8. De werkruimte aanpassen
      9. Deelvenster Eigenschappen
      10. Voorkeuren instellen
      11. Werkruimte voor aanraken
      12. Ondersteuning voor Microsoft Surface Dial in Illustrator
      13. Herstellen, ongedaan maken, geschiedenis en automatisch uitvoeren
      14. Weergave draaien
      15. Linialen, rasters en hulplijnen
      16. Toegankelijkheid in Illustrator
      17. Veilige modus
      18. Illustraties weergeven
      19. De Touch Bar gebruiken met Illustrator
      20. Bestanden en sjablonen
    3. Gereedschappen in Illustrator
      1. Selectie tools
        1. Selectie
        2. Direct selecteren
        3. Groep selecteren
        4. Toverstaf
        5. Lasso
        6. Tekengebied
      2. Navigatietools
        1. Handje
        2. Weergave draaien
        3. Zoomen
      3. Schildergereedschappen
        1. Verloop
        2. Net
        3. Vormen maken
      4. Teksttools
        1. Tekst
        2. Tekst op een pad
        3. Verticale tekst
      5. Tekentools
        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
      6. Tools wijzigen
        1. Roteren
        2. Spiegelen
        3. Schalen
        4. Schuin
        5. Breedte
        6. Vrije transformatie
        7. Pipet
        8. Overvloeien
        9. Gummetje
        10. Schaar
  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. Cloudopslag voor Adobe Illustrator upgraden
      4. 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. Grondbeginselen 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. Afbeeldingen overtrekken
      7. Een pad vereenvoudigen
      8. Perspectiefrasters definiëren
      9. Symboolgereedschappen en symboolsets
      10. Padsegmenten aanpassen
      11. Een bloem ontwerpen in 5 eenvoudige stappen
      12. Perspectief tekenen
      13. Symbolen
      14. Paden met pixeluitlijning tekenen voor webworkflows
    2. 3D-effecten en Adobe Substance-materialen
      1. Over 3D-effecten in Illustrator
      2. 3D-afbeeldingen maken
      3. Illustraties toewijzen aan 3D-objecten
      4. 3D-objecten maken
      5. 3D-tekst maken
    3. 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
    4. 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
    5. Objecten selecteren en rangschikken
      1. Objecten selecteren
      2. Lagen
      3. Objecten groeperen en uitbreiden
      4. Objecten verplaatsen, uitlijnen en verdelen
      5. Objecten stapelen    
      6. Objecten vergrendelen, verbergen en verwijderen
      7. Objecten dupliceren
      8. Objecten roteren en spiegelen
    6. 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
    7. Tekst
      1. Tekst en ander werk toevoegen met tekstobjecten
      2. Een lijst met opsommingstekens of nummers maken
      3. Tekstgebied beheren
      4. Lettertypen en typografie
      5. Tekst opmaken
      6. Tekst importeren en exporteren
      7. Alinea's opmaken
      8. Speciale tekens
      9. Tekst op een pad maken
      10. Teken- en alineastijlen
      11. Tabs
      12. Informatie over tekst
      13. Ontbrekende lettertypen zoeken (Typekit-workflow)
      14. Tekst uit Illustrator 10 bijwerken
      15. Arabische en Hebreeuwse tekst
      16. Lettertypen | Veelgestelde vragen en tips voor probleemoplossing
      17. Een 3D-teksteffect maken
      18. Creatieve typografische ontwerpen
      19. Tekst schalen en roteren
      20. Regelafstand en tekenafstand
      21. Woordafbreking en regelafbreking
      22. Tekstverbeteringen
      23. Spelling- en taalwoordenboeken
      24. Aziatische tekens opmaken
      25. Composers voor Aziatische schriften
      26. Tekstontwerpen maken met overvloeiobjecten
      27. Een tekstposter maken met Afbeeldingen overtrekken
    8. Speciale effecten maken
      1. Werken met effecten
      2. Afbeeldingsstijlen
      3. Een slagschaduw maken
      4. Vormgevingskenmerken
      5. Schetsen en mozaïeken maken
      6. Slagschaduw, gloed en doezeleffect
      7. Overzicht van effecten
    9. Webafbeeldingen
      1. Aanbevolen procedures voor het maken van webafbeeldingen
      2. Grafieken
      3. SVG
      4. Animaties maken
      5. Segmenten en afbeeldingen met hyperlinks
  6. Importeren, exporteren en opslaan
    1. Importeren
      1. Illustratiebestanden importeren
      2. Bitmapafbeeldingen importeren
      3. Illustraties importeren uit Photoshop
      4. Meerdere bestanden plaatsen
      5. Het insluiten van afbeeldingen ongedaan maken
      6. Adobe PDF-bestanden importeren
      7. EPS-, DCS- en AutoCAD-bestanden importeren
      8. Informatie over koppelingen
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Opslaan
      1. Illustraties opslaan
    4. Exporteren
      1. Illustrator-illustraties gebruiken in Photoshop
      2. Een illustratie exporteren
      3. Assets verzamelen en exporteren in batches
      4. Bestanden in een pakket opnemen
      5. Adobe PDF-bestanden maken
      6. CSS extraheren | Illustrator CC
      7. Adobe PDF-opties
      8. Bestandsinformatie en metagegevens
  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. Crashproblemen
    2. Bestanden herstellen na een crash
    3. Problemen met bestanden
    4. Ondersteunde bestandsindelingen
    5. Problemen met GPU-stuurprogramma's
    6. Problemen met Wacom-apparaten
    7. Problemen met DLL-bestanden
    8. Geheugenproblemen
    9. Problemen met voorkeurenbestanden
    10. Lettertypeproblemen
    11. Printerproblemen
    12. Foutrapport delen met Adobe

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). U kunt de CSS-code exporteren voor afzonderlijke objecten, of voor de volledige lay-out die in Illustrator is ontworpen.   

In het deelvenster CSS-eigenschappen (Venster > CSS-eigenschappen) kunnen gebruikers het volgende doen:

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

CSS-code weergeven en extraheren

Opmerking:

Voer een van de volgende stappen uit om CSS-code te genereren:

  • Zorg ervoor dat de objecten in uw Illustrator-document worden genoemd in het deelvenster Lagen.
  • Klik op Venster > CSS-eigenschappen > keuzemenu > Exportopties en schakel het selectievakje CSS voor naamloze objecten genereren in. 

  1. Selecteer Venster > CSS-eigenschappen.

    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. Vervolgmenu G. Stijlen die in de geselecteerde objecten worden gebruikt H. CSS-code 

  2. Voer een van de volgende stappen uit in een geopend Illustrator-document:

    • Selecteer één object. De CSS-code voor het object wordt weergegeven in het deelvenster CSS-eigenschappen.
    • Houd Shift ingedrukt, selecteer meerdere objecten en klik vervolgens op de knop CSS genereren in het deelvenster CSS-eigenschappen.
    • Druk op Ctrl/Cmd + A om alle objecten te selecteren en klik vervolgens op de knop CSS genereren in het deelvenster CSS-eigenschappen.

    De gegenereerde code wordt weergegeven.

  3. Voer een van de volgende handelingen uit om de gegenereerde code te verkrijgen:

    • Als u geselecteerde code wilt kopiëren, selecteert u de desbetreffende code en:
      • klikt u op Geselecteerde stijl kopiëren om de code naar het klembord te kopiëren
      • klikt u op het vervolgmenu en op Geselecteerde CSS exporteren
        om de code naar een bestand te exporteren
    • Als u alle code wilt kopiëren, maakt u geen selectie in de CSS-code en:
      • klikt u op Geselecteerde stijl kopiëren om de code naar het klembord te kopiëren
      • klikt u op het vervolgmenu en op Alles exporteren om de code naar een bestand te exporteren

  4. Bij het opslaan van CSS-code naar een bestand kunt u een keuze maken uit de volgende opties:

    CSS-exportopties

    Opmerking:

    Als u de inhoud van de gegenereerde CSS-code wilt wijzigen, klikt u in het deelvenster CSS-eigenschappen op Exportopties en maakt u de gewenste selecties.

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

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

Aanmelden bij je account

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren

Juridische kennisgeving    |    Online privacybeleid