CSS isoleren | Illustrator CC

Zoeken
Adobe Illustrator Handboek

Op deze pagina

Is van toepassing op: Adobe Illustrator

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

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid

Kies uw regio

Door een regio te selecteren wordt de taal en/of inhoud op Adobe.com gewijzigd.

Americas
Brasil
Canada - English
Canada - Français
Latinoamérica
México
United States
Europe, Middle East and Africa
Africa - English
België
Belgique
Belgium - English
Česká republika
Cyprus - English
Danmark
Deutschland
Eesti
España
France
Greece - English
Ireland
Israel - English
Italia
Latvija
Lietuva
Luxembourg - Deutsch
Luxembourg - English
Luxembourg - Français
Magyarország
Malta - English
Middle East and North Africa - English
Nederland
Norge
Österreich
Polska
Portugal
România
Schweiz
Slovenija
Slovensko
Suisse
Suomi
Sverige
Svizzera
Türkiye
United Kingdom
България
Россия
Україна
الشرق الأوسط وشمال أفريقيا - اللغة العربية
ישראל - עברית
Asia - Pacific
Australia
Hong Kong S.A.R. of China
India - English
New Zealand
Southeast Asia (Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam) - English
中国
中國香港特別行政區
台灣地區
日本
한국
Commonwealth of Independent States
Includes Armenia, Azerbaijan, Belarus, Georgia, Kazakhstan, Kyrgyzstan, Moldova, Tajikistan, Turkmenistan, Ukraine, Uzbekistan