Сервис HTML верстки конвертирует слои Photoshop в CSS3 код

С радостью сообщаем, что у сервиса Psd2HtmlConverter появилась давно ожидаемая функциональность. Теперь он умеет генерировать CSS3 стили из слоев макета, созданного в Photoshop, и делает это за считанные секунды. С этого момента сервис автоматической HTML CSS верстки поможет вам избавиться от еще большего круга рутинных задач и сэкономить больше времени.

Сервис умеет конвертировать:

Для изображений:

  1. Загругленные углы — создавайте прямоугольные фигуры с любыми закругленными углами
  2. Эффект Stroke — позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента
  3. Эффект Inner shadow
  4. Эффект Drop shadow
  5. Эффект Inner glow
  6. Эффект Outer glow
  7. Эффект Gradient overlay
    • Linear Gradient
    • Radial Gradient
    • Reflected Gradient
  8. Эффект Color Overlay

Для текстов:

  1. Эффект Color Overlay
  2. Эффект Drop shadow
  3. Эффект Outer glow

При генерации CSS стилей для эффектов Photoshop сервис в том числе создает и правила с префиксами, специфичными для браузеров:

  1. Mozilla Firefox
  2. Opera
  3. Internet Explorer
  4. Браузеры из семейства Webkit

Вскоре мы собираемся:

  1. Поддержать эффект Pattern Overlay
  2. Частично, насколько это возможно в CSS, поддержать эффект Bevel & Emboss
  3. Поддержать различные режимы смешения слоев, поддержка которых начинает появляться в браузерах

Рекомендации по подготовке макета:

  1. Используйте ‘Shape’, ‘Layer mask’ и ‘Clipping Mask’.
  2. Используйте для слоев только те эффекты, которые возможно преобразовать в CSS3. Это все эффекты, кроме: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’.
  3. Не растеризовывайте слои! При растеризации слоя теряется вся информация, которая позволяет преобразовать эффекты в CSS3 код.

 

Примеры:

На примерах, представленных ниже вы можете убедиться, что с помощью сервиса можно получить CSS3 верстку для слоев со сложными эффектами.

Радиальный градиент + закругленные углы

Исходный файл: Radial Gradient.psd

Изображение:

CSS код, генерируемый сервисом:

Reflected Gradient + закругленные углы + Stroke + Drop/Inner Shadow +  Inner/Outer Glow

Исходный файл: Reflected gradient, stroke, shadows, glows.psd

Изображение:

CSS код, генерируемый сервисом:

Share

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *