С радостью сообщаем, что у сервиса Psd2HtmlConverter появилась давно ожидаемая функциональность. Теперь он умеет генерировать CSS3 стили из слоев макета, созданного в Photoshop, и делает это за считанные секунды. С этого момента сервис автоматической HTML CSS верстки поможет вам избавиться от еще большего круга рутинных задач и сэкономить больше времени.
Сервис умеет конвертировать:
Для изображений:
- Загругленные углы — создавайте прямоугольные фигуры с любыми закругленными углами
- Эффект Stroke — позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента
- Эффект Inner shadow
- Эффект Drop shadow
- Эффект Inner glow
- Эффект Outer glow
- Эффект Gradient overlay
- Linear Gradient
- Radial Gradient
- Reflected Gradient
- Эффект Color Overlay
Для текстов:
- Эффект Color Overlay
- Эффект Drop shadow
- Эффект Outer glow
При генерации CSS стилей для эффектов Photoshop сервис в том числе создает и правила с префиксами, специфичными для браузеров:
- Mozilla Firefox
- Opera
- Internet Explorer
- Браузеры из семейства Webkit
Вскоре мы собираемся:
- Поддержать эффект Pattern Overlay
- Частично, насколько это возможно в CSS, поддержать эффект Bevel & Emboss
- Поддержать различные режимы смешения слоев, поддержка которых начинает появляться в браузерах
Рекомендации по подготовке макета:
- Используйте ‘Shape’, ‘Layer mask’ и ‘Clipping Mask’.
- Используйте для слоев только те эффекты, которые возможно преобразовать в CSS3. Это все эффекты, кроме: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’.
- Не растеризовывайте слои! При растеризации слоя теряется вся информация, которая позволяет преобразовать эффекты в CSS3 код.
Примеры:
На примерах, представленных ниже вы можете убедиться, что с помощью сервиса можно получить CSS3 верстку для слоев со сложными эффектами.
Радиальный градиент + закругленные углы
Исходный файл: Radial Gradient.psd
Изображение:
CSS код, генерируемый сервисом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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 код, генерируемый сервисом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; } |
