Användarhandbok Avbryt

Extrahera CSS | Illustrator

  1. Användarhandbok för Illustrator
  2. Lär känna Illustrator
    1. Introduktion till Illustrator
      1. Nyheter i Illustrator
      2. Vanliga frågor
      3. Systemkrav för Illustrator
      4. Illustrator för Apple Silicon
    2. Arbetsyta
      1. Allmänt om arbetsytan
      2. Skapa dokument
      3. Verktygsfält
      4. Standardkortkommandon
      5. Anpassa kortkommandon
      6. Introduktion till ritytor
      7. Hantera ritytor
      8. Anpassa arbetsytan
      9. Egenskapspanelen
      10. Ange inställningar
      11. Toucharbetsytan
      12. Stöd för Microsoft Surface Dial i Illustrator
      13. Återställa, ångra, visa händelser och automatisera
      14. Rotera vy
      15. Linjaler, stödraster och stödlinjer
      16. Tillgänglighet i Illustrator
      17. Säkert läge
      18. Visa illustrationer
      19. Använda Touch Bar med Illustrator
      20. Filer och mallar
    3. Verktyg i Illustrator
      1. Verktygsöversikt
      2. Markeringsverktyg
        1. Markering
        2. Direktmarkering
        3. Gruppmarkering
        4. Trollstav
        5. Lasso
        6. Rityta
      3. Navigeringsverktyg
        1. Hand
        2. Rotera vyn
        3. Zooma
      4. Målningsverktyg
        1. Övertoning
        2. Nät
        3. Formbyggaren
      5. Textverktyg
        1. Text
        2. Text på bana
        3. Lodrät text
      6. Ritverktyg
        1. Ritstift
        2. Lägg till fästpunkt
        3. Ta bort fästpunkt
        4. Fästpunkt
        5. Krökning
        6. Linjesegment
        7. Rektangel
        8. Rundad rektangel
        9. Oval
        10. Polygon
        11. Stjärna
        12. Pensel
        13. Plumppensel
        14. Penna
        15. Shaper
        16. Segment
      7. Ändringsverktyg
        1. Rotera
        2. Spegla
        3. Skalförändra
        4. Skeva
        5. Bredd
        6. Omforma fritt
        7. Pipett
        8. Övergång
        9. Suddgummi
        10. Sax
  3. Illustrator på iPad
    1. Introduktion till Illustrator på iPad
      1. Illustrator på iPad – översikt
      2. Vanliga frågor om Illustrator på iPad
      3. Systemkrav | Illustrator på iPad
      4. Vad du kan och inte kan göra med Illustrator på iPad
    2. Arbetsyta
      1. Illustrator på iPad-arbetsytan
      2. Touchgenvägar och touchgester
      3. Kortkommandon för Illustrator på iPad
      4. Hantera appinställningarna
    3. Dokument
      1. Arbeta med dokument i Illustrator på iPad
      2. Importera Photoshop- och Fresco-dokument
    4. Markera och ordna objekt
      1. Skapa upprepade objekt
      2. Övergångsobjekt
    5. Rita
      1. Rita och redigera banor
      2. Rita och redigera former
    6. Text
      1. Arbeta med text och teckensnitt
      2. Skapa textdesign längs en bana
      3. Lägg till egna teckensnitt
    7. Arbeta med bilder
      1. Vektorisera rasterbilder
    8. Färg
      1. Använda färger och övertoningar
  4. Molndokument
    1. Grunderna
      1. Arbeta med Illustrator-molndokument
      2. Dela och samarbeta om Illustrator-molndokument
      3. Uppgradera molnlagringen för Adobe Illustrator
      4. Illustrator-molndokument | Vanliga frågor
    2. Felsökning
      1. Felsöka problem med att skapa eller spara molndokument i Illustrator
      2. Felsöka problem med molndokument i Illustrator
  5. Lägga till och redigera innehåll
    1. Rita
      1. Grunder i ritning
      2. Redigera banor
      3. Skapa skarpa bilder
      4. Rita med pennan, krökningsverktyget eller pennverktyget
      5. Rita enkla linjer och former
      6. Bildkalkering
      7. Förenkla en bana
      8. Definiera perspektivstödraster
      9. Symbolverktyg och symboluppsättningar
      10. Justera bansegment
      11. Designa en blomma i fem enkla steg
      12. Perspektivritning
      13. Symboler
      14. Rita pixeljusterade banor för webbarbetsflöden
    2. 3D-effekter och Adobe Substance-material
      1. Adobe 3D-effekter i Illustrator
      2. Skapa 3D-grafik
      3. Mappa en teckning över 3D-objekt
      4. Skapa 3D-objekt
      5. Skapa 3D-text
    3. Färg
      1. Om färg
      2. Välj färger
      3. Använda och skapa färgrutor
      4. Justera färger
      5. Använda temapanelen i Adobe Color
      6. Färggrupper (harmonier)
      7. Färgtemapanelen
      8. Färga om teckningar
    4. Färglägga
      1. Om färgläggning
      2. Färglägg med fyllningar och linjer
      3. Direktfärgsgrupper
      4. Övertoningar
      5. Penslar
      6. Genomskinlighet och blandningslägen
      7. Tillämpa linjer på ett objekt
      8. Skapa och redigera mönster
      9. Nät
      10. Mönster
    5. Markera och ordna objekt
      1. Markera objekt
      2. Lager
      3. Gruppera och expandera objekt
      4. Flytta, justera och fördela objekt
      5. Stapla objekt    
      6. Låsa, dölja och radera objekt
      7. Duplicera objekt
      8. Rotera och spegla objekt
    6. Ändra form på objekt
      1. Beskär bilder
      2. Omforma objekt
      3. Kombinera objekt
      4. Skära ut, dela och beskära objekt
      5. Tänjning av marionett
      6. Skalförändra, skeva och förvränga objekt
      7. Övergångsobjekt
      8. Omforma med hjälp av omslag
      9. Ändra form på objekt med effekter
      10. Skapa nya former med verktygen Shaper och Formbyggare
      11. Arbeta med live-hörn
      12. Förbättrade arbetsflöden för att ändra form på objekt med stöd för touch
      13. Redigera urklippsmasker
      14. Live-former
      15. Skapa former med hjälp av verktyget Formbyggare
      16. Global redigering
    7. Format
      1. Lägg till text och jobba med textobjekt
      2. Skapa punktlistor och numrerade listor
      3. Hantera textområde
      4. Teckensnitt och typografi
      5. Formatera text
      6. Importera och exportera text
      7. Formatera stycken
      8. Specialtecken
      9. Skapa text på en bana
      10. Tecken- och styckeformat
      11. Flikar
      12. Text och tecken
      13. Sök efter saknade teckensnitt (Typekit-arbetsflöde)
      14. Uppdatera text från Illustrator 10
      15. Arabisk och hebreisk text
      16. Teckensnitt | Vanliga frågor och felsökningstips
      17. Skapa 3D-texteffekter
      18. Kreativ typografisk design
      19. Skalförändra och rotera text
      20. Rad- och teckenavstånd
      21. Avstavning och radbrytningar
      22. Textförbättringar
      23. Stavnings- och språkordlistor
      24. Formatera asiatiska tecken
      25. Dispositioner för asiatisk skrift
      26. Skapa textdesign med övergångar mellan objekt
      27. Skapa en textaffisch med Bildkalkering
    8. Skapa specialeffekter
      1. Arbeta med effekter
      2. Grafikformat
      3. Skapa en skugga
      4. Utseendeattribut
      5. Skapa skisser och mosaik
      6. Skuggor, glöd och ludd
      7. Sammanfattning av effekter
    9. Webbgrafik
      1. Bästa sätten att skapa webbgrafik
      2. Diagram
      3. SVG
      4. Skapa animeringar
      5. Segment och bildscheman
  6. Importera, exportera och spara
    1. Importera
      1. Montera flera filer
      2. Hantera länkade och inbäddade filer
      3. Länkinformation
      4. Ångra inbäddning av bilder
      5. Importera teckningar från Photoshop
      6. Importera bitmappsbilder
      7. Importera Adobe PDF-filer
      8. Importera EPS-, DCS- och AutoCAD-filer
    2. Creative Cloud Libraries i Illustrator 
      1. Creative Cloud Libraries i Illustrator
    3. Spara
      1. Spara teckningar
    4. Exportera
      1. Använda Illustrator-bilder i Photoshop
      2. Exportera teckningar
      3. Samla resurser och exportera gruppvis
      4. Packa filer
      5. Skapa Adobe PDF-filer
      6. Extrahera CSS | Illustrator CC
      7. Adobe PDF-alternativ
      8. Filinformation och metadata
  7. Skriva ut
    1. Förbereda för utskrift
      1. Ange utskriftsinställningar för dokument
      2. Ändra sidstorlek och orientering
      3. Ange skärmärken för beskärning eller justering
      4. Kom igång med stora arbetsytor
    2. Skriva ut
      1. Övertryck
      2. Skriva ut med färghantering
      3. PostScript-utskrift
      4. Utskriftsförinställningar
      5. Utskriftsmärken och utfall
      6. Skriva ut och spara genomskinliga teckningar
      7. Svällning
      8. Skriva ut färgseparationer
      9. Skriva ut övertoningar, nätövertoningar och färgövergångar
      10. Vitt övertryck
  8. Automatisera uppgifter
    1. Datasammanfogning med hjälp av panelen Variabler
    2. Automatisering med skript
    3. Automatisering med funktionsmakron
  9. Felsökning 
    1. Problem med krascher
    2. Återställ filer efter kraschar
    3. Filproblem
    4. Filformat som stöds
    5. Problem med GPU-enhetsdrivrutiner
    6. Problem med Wacom-enheter
    7. Problem med DLL-filer
    8. Minnesproblem
    9. Problem med preferensfilen
    10. Problem med teckensnitt
    11. Skrivarproblem
    12. Skicka en kraschrapport till Adobe
    13. Förbättra prestandan för Illustrator

Du kan skapa designen för en HTML-sida i Illustrator. Det fungerar som en bra visuell guide för webbutvecklare som sedan kan koda layouten, format och objekt på en sida i en HTML-redigerare. Det är dock en tidskrävande och omständlig process att exakt återge komponenternas och objektens utseende och position.

När du skapar layouten för en HTML-sida med Illustrator kan du även generera och exportera den underliggande CSS-kod som avgör komponenternas och objektens utseende på sidan. Med CSS kan du styra utseendet på text och objekt (på liknande sätt som för tecken och teckenformat). Du kan välja att exportera CSS-koden för enskilda objekt eller för hela layouten som är utformad med Illustrator.   

På panelen CSS-egenskaper (Fönster > CSS-egenskaper) kan du göra följande:

  • Visa CSS-koden för markerade objekt
  • Kopiera CSS-koden för markerade objekt
  • Exportera en, flera eller alla markerade Illustrator-element till en CSS-fil
  • Exportera de rastrerbara bilder som används
  • Generera webbläsarspecifik CSS-kod

Visa och extrahera CSS-kod

Obs!

Gör något av följande om du vill generera CSS-kod:

  • Kontrollera att objekten i Illustrator-dokumentet har namn på panelen Lager.
  • Klicka på Fönster > CSS-egenskaper > utfällbar meny > Alternativ för Exportera och markera kryssrutan Generera CSS för namnlösa objekt
  1. Välj Fönster > CSS-egenskaper.

    CSS-egenskapskod

    A. Varning om att vissa format inte kunde konverteras till CSS-kod B. Dialogrutan CSS-exportalternativ C. Exportera markerade CSS till fil D. Kopiera valt format till Urklipp E. Generera CSS F. Utfällbar meny G. Format som används i det markerade objektet H. CSS-kod 

  2. Gör något av följande i ett öppet Illustrator-dokument:

    • Markera ett objekt. CSS-koden för objektet visas på panelen CSS-egenskaper.
    • Håll ned Skift-tangenten, markera flera objekt och klicka på knappen Generera CSS på panelen CSS-egenskaper.
    • Tryck först på Ctrl/Cmd + A för att markera alla objekt och klicka sedan på knappen Generera CSS på panelen CSS-egenskaper.

    Den genererade CSS-koden visas.

  3. Gör något av följande för att få den CSS-kod som har genererats:

    • Om du vill kopiera markerad kod markerar du koden och gör så här:
      • Klicka på Kopiera markerad stil för att kopiera till Urklipp
      • Klicka först på den utfällbara menyn och klicka sedan på Exportera markerad CSS
        för att exportera till en fil
    • Om du vill kopiera all kod markerar du inget i CSS-koden och gör så här:
      • Klicka på Kopiera markerad stil för att kopiera till Urklipp
      • Klicka först på den utfällbara menyn och sedan på Exportera alla för att exportera en fil
  4. Välj bland följande alternativ medan CSS-koden sparas till en fil:

    CSS-exportalternativ

    Obs!

    Om du vill ändra innehållet i den CSS-kod som genereras klickar du på Alternativ för Exporterapanelen CSS-egenskaper, och markerar sedan det du vill ändra.

Exempel på CSS-kod

Rektangel med en toning tillämpad (alla webbläsare)

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

Rektangel med en toning tillämpad (endast webkit-baserade webbläsare)

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

Flera 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; }
Adobes logotyp

Logga in på ditt konto