Du kan designe en HTML-side i Illustrator. Dette er en god visuel rettesnor for en webudvikler, som herefter kan kode layoutet, typografierne og objekterne til en side i et HTML-redigeringsprogram. Det er dog et stort arbejde at genskabe det nøjagtige udseende og komponenternes eksakte placering.

I Illustrator CC kan du, når du opretter layoutet for en HTML-side, også generere og eksportere den underlæggende CSS-kode, der bestemmer komponenternes og objekternes udseende på siden. Med CSS kan du kontrollere udseendet af tekst og objekter (på samme måde som tegn- og grafikformater). Du kan vælge at eksportere CSS-koden for hvert enkelt objekt eller for hele det layout, der er designet i Illustrator.   

I panelet CSS-egenskaber (Vindue > CSS-egenskaber) kan brugerne gøre følgende:

  • Se CSS-koden for de markerede objekter
  • Kopiere CSS-koden for de markerede objekter
  • Eksportere et, flere eller alle de markerede Illustrator-elementer til en CSS-fil
  • Eksportere billeder, der kan omdannes til rasterbilleder
  • Generere browserspecifik CSS-kode

Video: CSS-udtrækning i Illustrator CC

Video: CSS-udtrækning i Illustrator CC
Se, hvordan du lynhurtigt kan oprette websteder ved at lade Illustrator CC generere CSS-kode for dig – for tekst, objekter og sågar hele layouts.
Rufus Deuchler

Vis og udtræk CSS-kode

Bemærk:

Benyt en af følgende fremgangsmåder til at generere CSS-kode:

  • Sørg for, at objekterne i dit Illustrator-dokument er navngivet i panelet Lag.
  • Klik på Vindue > CSS-egenskaber > pop op-menu > Eksportindstillinger, og markér afkrydsningsfeltet Generér CSS for unavngivne objekter. 

  1. Vælg Vindue > CSS-egenskaber.

    A. Advarsel, hvis nogle formater ikke kunne konverteres til CSS-kode B. Dialogboksen Indstillinger for CSS-eksport C. Eksporter markerede CSS til fil D. Kopiér det markerede format til udklipsholder E. Generer CSS F. Pop op-menu G. Formatter brugt i de markerede objekter H. CSS-kode 
  2. Gør et af følgende i et åbent Illustrator-dokumentet:

    • Markér et objekt. CSS-koden for objektet vises i panelet CSS-egenskaber.
    • Hold Shift-tasten nede, markér flere objekter, og klik derefter på knappen Generér CSS i panelet CSS-egenskaber.
    • Tryk på Ctrl/Cmd+A for at markere alle objekterne, og klik derefter på knappen Generér CSS i panelet CSS-egenskaber.

    Den genererede CSS-kode vises.

  3. Benyt en af følgende fremgangsmåder til at hente den CSS-kode, der er genereret:

    • Den markerede kode kopieres ved at vælge den specifikke kode og derefter:
      • Klik på Kopiér det markerede format for at kopiere til udklipsholder
      • Klik på pop op-menuen og på Eksportér den markerede CSS for at eksportere til en fil
    • Hele koden kopieres ved at undlade at markere noget i CSS-koden og derefter gøre følgende:
      • Klik på Kopiér det markerede format for at kopiere til udklipsholder
      • Klik på pop op-menuen og på Eksportér alt for at eksportere til en fil
  4. Når du gemmer CSS-koden til en fil, skal du vælge en af følgende indstillinger:

    Bemærk:

    Klik på Eksportindstillinger i panelet CSS-egenskaber, og foretag de relevante markeringer for at ændre indholdet i den CSS-kode, der er genereret.

Eksempel på CSS-kode

Rektangel med en farvetildeling (alle browsere)

.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 farveforløbtildeling (gælder kun webkitbaserede browsere)

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

Flere objekter

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

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online