W programie Illustrator można stworzyć projekt strony HTML. Służy on jako wskazówka wizualna dla programisty, który może następnie przygotować kod układu, stylu oraz obiektów na stronie za pomocą edytora HTML. Jednak dokładne odwzorowanie wyglądu i rozmieszczenia poszczególnych składników to czasochłonna i żmudna praca.

Po stworzeniu układu strony HTML za pomocą programu Illustrator CC można wygenerować, a następnie wyeksportować ukryty kod CSS, który decyduje o wyglądzie składników i obiektów na stronie. Kod w języku CSS pozwala kontrolować wygląd tekstu i obiektów (podobnie jak w przypadku stylów znakowych i akapitowych). Użytkownik może wyeksportować kod CSS dla poszczególnych obiektów lub dla całego układu zaprojektowanego w programie Illustrator.   

Panel Właściwości CSS (Okno > Właściwości CSS) pozwala wykonywać następujące operacje:

  • Podgląd kodu CSS dla wybranych obiektów
  • Kopiowanie kodu CSS dla wybranych obiektów
  • Eksportowanie jednego, kilku lub wszystkich elementów programu Illustrator do pliku CSS
  • Eksportowanie użytych obrazów rasteryzowalnych
  • Generowanie kodu CSS pod kątem konkretnych przeglądarek

Film: Wyodrębnianie CSS w programie Illustrator CC

Film: Wyodrębnianie CSS w programie Illustrator CC
Przekonaj się, w jaki sposób program Illustrator CC przyśpiesza proces tworzenia stron, generując kod CSS dla tekstu, obiektów, a nawet całych układów.
Rufus Deuchler

Podgląd i wyodrębnianie kodu CSS

Uwaga:

Aby wygenerować kod CSS, wykonaj jedną z poniższych czynności:

  • Upewnij się, że obiekty w dokumencie programu Illustrator mają przypisane nazwy w panelu Warstwy.
  • Kliknij kolejno Okno > Właściwości CSS > menu wysuwane > Opcje eksportu, a następnie zaznacz pole wyboru Generuj kod CSS dla nienazwanych obiektów

  1. Wybierz polecenie Okno > Właściwości CSS.

    A. Ostrzeżenie, jeśli wystąpi błąd podczas konwertowania któregoś ze stylów na kod CSS B. Okno dialogowe Opcje eksportu formatu CSS C. Eksportuj wybrane pliki CSS do pliku D. Kopiuj zaznaczone style do schowka E. Generuj CSS F. Wysuwane menu G. Style zastosowane wobec wybranych obiektów H. Kod CSS 
  2. W otwartym dokumencie programu Illustrator wykonaj jedną z poniższych czynności:

    • Zaznacz pojedynczy obiekt. Kod CSS tego obiektu zostanie wyświetlony w panelu Właściwości CSS.
    • Naciśnij i przytrzymaj klawisz Shift, zaznacz kilka obiektów, a następnie kliknij przycisk Generuj CSS w panelu Właściwości CSS.
    • Naciśnij kombinację klawiszy Ctrl/Cmd + A, aby zaznaczyć wszystkie obiekty, a następnie kliknij przycisk Generuj CSS w panelu Właściwości CSS.

    Zostanie wyświetlony wygenerowany kod CSS.

  3. Aby pozyskać wygenerowany kod CSS, wykonaj jedną z poniższych czynności:

    • Aby skopiować zaznaczony kod, zaznacz żądaną porcję kodu, a następnie:
      • Aby skopiować do schowka, kliknij Kopiuj zaznaczony styl
      • Aby wyeksportować kod do pliku, kliknij menu wysuwane, a następnie kliknij polecenie Eksportuj zaznaczony kod CSS
    • Aby skopiować cały kod, nie zaznaczaj żadnej jego porcji, a następnie:
      • Aby skopiować do schowka, kliknij Kopiuj zaznaczony styl
      • Aby wyeksportować kod do pliku, kliknij menu wysuwane, a następnie kliknij polecenie Eksportuj wszystko
  4. Podczas zapisywania kodu CSS do pliku wybierz jedną z poniższych opcji:

    Uwaga:

    Aby zmodyfikować zawartość generowanego kodu CSS, w panelu Właściwości CSS kliknij Opcje eksportu, a następnie wybierz żądane opcje.

Przykładowy kod CSS

Prostokąt z zastosowanym gradientem (wszystkie przeglądarki)

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

Prostokąt z zastosowanym gradientem (tylko przeglądarki bazujące na web-kitach)

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

Wiele obiektów

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

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online