За допомогою програми Illustrator можна розробляти дизайн HTML-сторінок. Це – гарний наочний посібник, на основі якого веб-дизайнер у подальшому зможе написати код для відтворення макету, стилів та об'єктів у HTML-редакторі. Однак відтворення ідентичного вигляду і положення компонентів та об'єктів – це дуже тривалий і кропіткий процес.

У програмі Illustrator CC під час створення макета для HTML-сторінки можна також згенерувати та експортувати відповідний CSS-код, який утворює вигляд компонентів та об'єктів сторінки. За допомогою CSS-коду визначається вигляд тексту та об'єктів (аналогічно до роботи стилів символів та об'єктів у програмі Illustrator). Експортувати можна як CSS-код для окремих об'єктів, так і всього макета, розробленого у програмі Illustrator.   

За допомогою панелі «Властивості CSS» («Вікно» > «Властивості CSS») можна виконувати такі дії:

  • Переглядати CSS-код виділених об'єктів
  • Копіювати CSS-код виділених об'єктів
  • Експортувати один чи декілька, або всі разом виділені елементи документа Illustrator у CSS-файл
  • Експортувати растеризовані зображення, використані в документі Illustrator
  • Генерувати CSS-код для певного браузера

Відео: виокремлення CSS у програмі Illustrator CC

Відео: виокремлення CSS у програмі Illustrator CC
Дізнайтеся, наскільки можна пришвидшити процес розробки веб-сайтів, лише активувавши у програмі Illustrator CC функцію автоматичного генерування CSS-коду для усіх необхідних елементів сторінки - для тексту, об'єктів та навіть цілих макетів.
Руфус Дойхлер

Перегляд і виокремлення CSS-коду

Примітка.

Щоб згенерувати CSS-код, виконайте одну з таких дій:

  • Задайте ім'я для кожного об'єкта документа Illustrator на панелі шарів.
  • Клацніть «Вікно» > «Властивості CSS» > розкривне меню > «Параметри експорту» та поставте прапорець для параметра «Створити CSS для безіменних об'єктів». 

  1. Оберіть команду меню «Вікно» > «Властивості CSS».

    A. Попередження, якщо деякі стилі не вдалося перетворити на CSS-код B. Діалогове вікно параметрів експорту до CSS C. Експорт виділеного CSS-коду до файлу D. Копіювання виділеного стилю до буфера обміну E. Створення CSS F. Розкривне меню G. Стилі, використані у виділених об'єктах H. CSS-код 
  2. Відкривши готовий документ Illustrator, виконайте такі дії:

    • Виділіть об'єкт. CSS-код цього об'єкта відображатиметься на панелі «Властивості CSS».
    • Натисніть і утримуйте клавішу Shift, виділіть кілька об'єктів і натисніть кнопку «Генерувати CSS» на панелі «Властивості CSS».
    • Натисніть разом клавіші Ctrl/Cmd та «A», щоб виділити всі об'єкти, а потім натисніть кнопку «Генерувати CSS» на панелі «Властивості CSS».

    На екрані з'явиться згенерований CSS-код.

  3. Щоб використати згенерований CSS-код, виконайте одну з таких дій:

    • Щоб скопіювати CSS-код, виділіть необхідну ділянку CSS-коду, після чого:
      • Щоб скопіювати до буфера обміну, натисніть «Копіювати виділений стиль»
      • Щоб експортувати у файл, клацніть розкривне меню та натисніть «Експортувати виділений CSS-код»
    • Щоб скопіювати весь згенерований CSS-код, не виділяйте жодної його ділянки та виконайте таке:
      • Щоб скопіювати до буфера обміну, натисніть «Копіювати виділений стиль»
      • Щоб експортувати у файл, клацніть розкривне меню та натисніть «Експортувати все»
  4. Під час збереження CSS-коду у файл оберіть один із таких параметрів:

    Примітка.

    Щоб змінити згенерований CSS-код, клацніть на панелі «Властивості CSS» параметр «Параметри експорту» і внесіть відповідні зміни.

Зразок CSS-коду

Прямокутник із застосуванням градієнта (для всіх браузерів)

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

Прямокутник із застосуванням градієнта (лише для браузерів на основі WebKit)

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

Кілька об'єктів

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

Цей документ захищено ліцензією Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Публікації Twitter™ і Facebook не підпадають під умови ліцензії Creative Commons.

Юридична інформація   |   Політика мережевої конфіденційності