В Illustrator можно создать вариант оформления для страницы HTML. Он может служить наглядным руководством для разработчика веб-страниц, создающего код макета, стилей и объектов на странице с помощью редактора HTML. Однако точная реализация внешнего вида и положения компонентов и объектов требует значительных затрат времени и усилий.

При создании макета страницы HTML в Illustrator CC можно также сформировать и экспортировать лежащий в его основе код каскадных таблиц стилей, определяющий внешний вид компонентов и объектов на данной странице. Каскадные таблицы стилей позволяют управлять внешним видом текста и объектов (подобно стилям символов и графики). Экспорт кода каскадных таблиц стилей возможен как для отдельного объекта, так и для всего макета, разработанного в Illustrator.   

На палитре «Свойства каскадных таблиц стилей» («Окно» > «Свойства CSS») пользователи могут выполнять следующие действия.

  • Просмотр кода каскадных таблиц стилей для выбранных объектов
  • Копирование кода каскадных таблиц стилей для выбранных объектов
  • Экспорт одного, нескольких или всех выбранных элементов Illustrator в файл каскадных таблиц стилей
  • Экспорт используемых изображений, допускающих растеризацию
  • Формирование кода каскадных таблиц стилей для конкретного браузера

Видеоролик: Извлечение каскадных таблиц стилей в Illustrator CC

Видеоролик: Извлечение каскадных таблиц стилей в Illustrator CC
Демонстрируется формирование в Illustrator CC кода каскадных таблиц стилей для текста, объектов и макетов в целом, позволяющее ускорить разработку веб-сайтов.
Руфус Дойчлер

Просмотр и извлечение кода каскадных таблиц стилей

Примечание.

Для формирования кода CSS выполните одно из следующих действий.

  • Убедитесь в том, что на палитре данного слоя объектам в документе Illustrator присвоены имена.
  • Нажмите «Окно» > «Свойства каскадных таблиц стилей» > раскрывающееся меню > «Параметры экспорта», затем установите флажок в поле «Создать каскадную таблицу стилей для неназванных объектов»

  1. Выберите «Окно» > «Свойства каскадных таблиц стилей».

    A. Предупреждение о том, что некоторые стили не удалось сконвертировать в код каскадных таблиц стилей B. Диалоговое окно «Параметры экспорта каскадных таблиц стилей» C. Экспорт выделенных каскадных таблиц стилей в файл D. Копировать выделенный стиль в буфер обмена E. Создать CSS F. Всплывающее меню G. Стили, используемые в выделенных объектах H. Код каскадных таблиц стилей 
  2. В открытом документе Illustrator выполните одно из следующих действий.

    • Выберите один объект. На палитре «Свойства каскадных таблиц стилей» отображается код каскадных таблиц стилей для этого объекта.
    • Удерживая нажатой клавишу Shift, выберите несколько объектов, затем нажмите кнопку «Генерировать каскадную таблицу стилей» на палитре «Свойства каскадных таблиц стилей».
    • Нажмите Ctrl/Cmd + A, чтобы выбрать все объекты и нажмите кнопку «Генерировать каскадную таблицу стилей» на панели«Свойства каскадных таблиц стилей».

    Отображается сформированный код каскадных таблиц стилей.

  3. Для получения сформированного кода каскадных таблиц стилей выполните одну из следующих процедур.

    • Для копирования части кода выберите ее, затем выполните следующие действия.
      • Выберите «Скопировать выделенный стиль» для копирования в буфер обмена.
      • Щелкните на всплывающем меню, затем выберите «Экспортировать выбранные CSS» для экспорта в файл.
    • Для копирования всего кода убедитесь в том, что в коде каскадных таблиц стилей ничего не выбрано, затем выполните следующие действия.
      • Выберите «Скопировать выделенный стиль» для копирования в буфер обмена.
      • Щелкните на всплывающем меню, затем выберите «Экспортировать все» для экспорта в файл.
  4. При сохранении кода каскадных таблиц стилей в файл выберите один из следующих вариантов.

    Примечание.

    Если требуется изменить содержимое сформированного кода каскадных таблиц стилей, на палитре «Свойства каскадных таблиц стилей» щелкните на элементе «Параметры экспорта», затем выберите подходящие значения.

Примеры кода каскадных таблиц стилей

Прямоугольник с примененным градиентом (все браузеры)

.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  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет