Создать CSS из слоев

Функция Copy CSS создает свойства Cascading Style Sheet непосредственно из слоев Photoshop, фиксируя характеристики дизайна, которые можно вставить в файлы таблиц стилей.Этот технологический процесс связывает визуальный дизайн и реализацию кода, особенно при подготовке материалов для веб-проектов или совместной работе с разработчиками, которым нужны точные спецификации стилей.

Используйте Copy CSS, когда нужно перевести элементы визуального дизайна в готовые для кода объявления стилей.Эта функция работает с отдельными слоями-фигурами, текстовыми слоями или группами слоев, содержащими эти элементы.Она создает CSS, который можно вставить непосредственно в таблицу стилей, фиксируя свойства дизайна с точностью до пикселя.Для более широких технологических процессов перехода от дизайна к веб-версии изучите эффекты и стили слоев для дополнительных параметров оформления и экспорт ресурсов для других форматов вывода.

Свойства CSS, полученные из слоев

Copy CSS извлекает различные свойства в зависимости от типа выбранного слоя.

Слои-фигуры создают CSS для:

• Координаты размера и положения
• Цвет обводки
• Цвет заливки, включая определения градиента
• Эффекты тени

Текстовые слои фиксируют свойства фигуры, а также спецификации оформления:

• Гарнитура шрифта
• Кегль и толщина шрифта
• Высота строки
• Оформление текста (подчеркивание, зачеркивание)
• Вертикальное выравнивание (надстрочный, подстрочный)
• Выравнивание текста

Группы слоев создают структурированные классы CSS, которые представляют отношения «родитель — потомок».Сама группа становится родительским div-элементом, а каждый слой внутри группы создаёт дочерний div-элемент.Значения положения top и left для дочерних элементов вычисляются относительно родительского контейнера, что отражает стандартное поведение позиционирования CSS.

Ограничения Copy CSS

Функция Copy CSS не работает со смарт-объектами.Если ваш слой — это смарт-объект, дважды щелкните по нему, чтобы изменить его содержимое и скопировать CSS из слоев внутри документа смарт-объекта, либо сначала растрируйте слой, если это уместно для вашего технологического процесса.

Эта функция не может обрабатывать несколько слоев-фигур или текстовых слоев, выбранных одновременно, если они не сгруппированы.Чтобы скопировать CSS из нескольких слоев одновременно, сначала поместите их в группу слоев.

Создавайте код CSS на основе слоев

Код CSS теперь находится в буфере обмена и готов для использования в вашем веб-проекте.Просмотрите созданные свойства, чтобы убедиться, что они соответствуют требованиям вашей разработки, и при необходимости измените значения для гибкого дизайна или совместимости с браузерами.