Сервис 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 код, генерируемый сервисом:

.rounded_rectangle_6 {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
	-webkit-border-radius: 3.52px/5.83px;
	-moz-border-radius: 3.52px/5.83px;
	border-radius: 3.52px/5.83px;

	background: -moz-radial-gradient(center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -o-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -webkit-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -ms-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;

	width: 232px;
	height: 137px;
	float: left;
	position: relative;
}

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

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

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

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

.rounded_rectangle_4 {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
	border: 2px solid #d3072e; /*stroke*/
	-webkit-border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;
	-moz-border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;
	border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;

	-webkit-box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/
	-moz-box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/
	box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/

	background: -moz-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: -o-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: -webkit-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: linear-gradient(350deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;

	width: 289px;
	height: 181px;
	float: left;
	position: relative;
}
Share

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