Létrehozhatja egy HTML oldal tervét az Illustrator szoftverben. Ez jó vizuális útmutatóul szolgál a webfejlesztőknek, akik aztán egy HTML-szerkesztő oldalán kódolhatják az elrendezést, a stílusokat és az objektumokat. Az összes összetevő és objektum kinézetének és helyzetének pontos lemásolása azonban nagyon időigényes és fárasztó eljárás.

Ha az Illustrator CC programmal készíti el egy HTML oldal elrendezését, akkor létrehozhatja és exportálhatja is az alapjául szolgáló CSS kódot, ami meghatározza az oldal összetevőinek és objektumainak kinézetét. A CSS lehetővé teszi, hogy meghatározza a szöveg és az objektumok megjelenését (a karakterek és grafikák stílusához hasonlóan). Az egyes objektumok vagy akár az Illustrator programban megtervezett teljes oldal CSS kódját is exportálhatja.   

A CSS-tulajdonságok panel (Ablak > CSS-tulajdonságok) az alábbiakat biztosítja a felhasználók számára:

  • A kiválasztott objektumok CSS kódjának megtekintése
  • A kiválasztott objektumok CSS kódjának másolása
  • Egy, több vagy az összes kijelölt Illustrator elem exportálása egy CSS fájlba
  • A felhasznált raszterezhető képek exportálása
  • Böngésző-specifikus CSS kód létrehozása

Videó: CSS kinyerése az Illustrator CC programban

Videó: CSS kinyerése az Illustrator CC programban
Tekintse meg, hogyan tud gyorsabban létrehozni webhelyeket azzal, hogy az Illustrator CC hozza létre önnek a szöveg, az objektumok vagy akár a teljes elrendezés CSS kódját.
Rufus Deuchler

CSS kód megtekintése és kinyerése

Megjegyzés:

A CSS kód létrehozásához hajtsa végre az alábbiak egyikét:

  • Ügyeljen arra, hogy az Illustrator dokumentumban az objektumok el legyenek nevezve a Réteg panelen.
  • Kattintson az Ablak > CSS-tulajdonságok > úszó menü > Exportálási beállítások elemre, majd jelölje be a CSS létrehozása névtelen objektumokhoz jelölőnégyzetet. 

  1. Válassza az Ablak > CSS-tulajdonságok elemet.

    A. Figyelmeztetést kap, ha néhány stílus nem konvertálható CSS-kóddá B. CSS exportálási beállítások párbeszédablak C. Kijelölt CSS exportálása fájlba D. Kijelölt stílus másolása a vágólapra E. CSS generálása F. Úszó menü G. Kijelölt objektumokban használt stílusok H. CSS-kód 
  2. Egy megnyitott Illustrator dokumentumban hajtsa végre az alábbiak egyikét:

    • Válasszon ki egy objektumot. Az objektum CSS kódja a CSS-tulajdonságok panelben látható.
    • Tartsa lenyomva a Shift billentyűt, válasszon ki több objektumot, majd kattintson a CSS generálása gombra a CSS-tulajdonságok panelen.
    • Nyomja le a Ctrl/Cmd + A billentyűkombinációt az összes objektum kijelöléséhez, majd kattintson a CSS generálása gombra a CSS-tulajdonságok panelen.

    Megjelenik a létrehozott CSS kód.

  3. A létrehozott CSS kód megszerzéséhez hajtsa végre az alábbiak egyikét:

    • A kijelölt kód kimásolásához jelölje ki a szükséges kódot, majd:
      • A vágólapra másoláshoz kattintson a Kijelölt stílus másolása elemre
      • Egy fájlba történő exportáláshoz kattintson a lebegő menüre, majd a Kijelölt CSS exportálása parancsra
    • Az összes kód kimásolásához ne jelöljön ki semmit sem a CSS kódban, majd:
      • A vágólapra másoláshoz kattintson a Kijelölt stílus másolása elemre
      • Egy fájlba történő exportáláshoz kattintson a lebegő menüre, majd az Összes exportálása parancsra
  4. Amikor fájlba menti el a CSS kódot, az alábbi lehetőségek közül választhat:

    Megjegyzés:

    A létrehozott CSS kód tartalmának módosításához a CSS-tulajdonságok panelben kattintson az Exportálási beállítások elemre, majd hajtsa végre a szükséges kijelöléseket.

Minta CSS kód

Téglalap színátmenettel (minden böngészőhöz)

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

Téglalap színátmenettel (csak webkit alapú böngészőhöz)

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

Több objektum

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

Ez a munka a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 3.0 Unported licenc alatt lett közzétéve.  A Twitter™ és Facebook közzétételeket a Creative Commons jogi feltételei nem szabályozzák.

Jogi közlemények   |   Online adatvédelmi nyilatkozat