We are happy to announce that long-awaited feature is now available in the Psd2HtmlConverter service. Now it automatically converts Photoshop layers into CSS3 code, and does it just in a matter if seconds. Since this moment the service of automated PSD to HTML5/CSS3 conversion will handle a lot of routing tasks for you and will help you to save more time.
Service is able to convert:
For image layers:
- Rounded borders – create shape with any combinations of rounded borders
- ‘Stroke’ style
- ‘Inner shadow’ style
- ‘Drop shadow’ style
- ‘Inner glow’ style
- ‘Outer glow’ style
- ‘Gradient overlay’ style
- Linear Gradient
- Radial Gradient
- Reflected Gradient
- ‘Color Overlay’ style
For text layers:
- ‘Color Overlay’ style
- ‘Drop shadow’ style
- ‘Outer glow’ style
When generating CSS code for layer styles, the service also creates vendor prefixes for following browsers:
- Mozilla Firefox
- Opera
- Internet Explorer
- Webkit family
Soon we are going to:
- Support ‘Pattern Overlay’ style
- Partially, as far as possible in the CSS3, support ‘Bevel & Emboss’ style
- Support different blending modes, since some browsers are starting to support them
Recommendations on the PSD template preparation:
- Use ‘Shapes’, ‘Layer masks’ and ‘Clipping Masks’ extensively.
- Use only those layer styles which it is possible to convert into CSS3 code. I.e., do not use the following layer styles: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’.
- Do not rasterize layers! When you rasterize a layer, you lose all the information that allows the service to convert a layer style into CSS3 code.
Examples:
On the examples below you can see what kind of code you will get for layers with quite complex styles.
Radial gradient + rounded borders
Original PSD file: Radial Gradient.psd
Image:
CSS code generated by service:
|
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 + rounded borders + Stroke + Drop/Inner Shadow + Inner/Outer Glow
Original PSD file: Reflected gradient, stroke, shadows, glows.psd
Image:
CSS code generated by service:
|
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; } |
