CSS isoleren | Illustrator CC

Zoeken
Adobe Illustrator Handboek

Op deze pagina

Is van toepassing op: Adobe Illustrator

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 CC 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

Video: CSS isoleren in Illustrator CC

Video: CSS isoleren in Illustrator CC
Zie hoe u sneller websites kunt maken door Illustrator CC CSS-code voor u te laten genereren voor tekst, objecten en zelfs voor complete lay-outs.
Rufus Deuchler

CSS-code weergeven en isoleren

Opmerking:

Voer een van de volgende handelingen 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.

    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 handelingen 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
      • Klik 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
      • Klik 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:

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