Join Chris Converse for an in-depth discussion in this video Converting layer styles (effects) to CSS, part of Design the Web: Getting CSS from Photoshop.
Now, in addition to text, vector, and art shapes, Photoshop can also convert layer styles or effects into CSS as well. To demonstrate this, we're going to go back to our web design.psd file. Let's come down on our toolbar, let's come down here on the Vector Tools and let's select the Ellipse tool. Next, I come up on the stage, click and drag. This'll a vector shape. So let's come in here and style this a little bit. Now, instead of styling this with the Properties panel like we did in the last movie, what we're going to do here is style this with our effects. So I'm going to close the Properties panel, and let's come down here and come down to Effects.
First, let's add a stroke. Let's come in here and let's add a four pixel stroke. We'll keep this outside. For the color, let's come in here and select white. We'll click OK. Next, we'll come down and choose Drop Shadow. On the drop shadow, let's set the opacity to about 50%. I'm going to set the distance to zero, but we'll set the size rather large. Then maybe make the opacity a little bit stronger. Next, let's come over to Gradient Overlay. Next, click the Gradients Swatch, this'll bring up the Gradient Editor. Let's select the first Gradient Color Stop, let's set this to red.
Let's click OK. Let's select a second color stop. Let's make this orange. Click OK. Click OK out of the gradient editor, and then we'll click OK for all of the effects. So now with this selected in the Layers panel, let's come up here and choose Copy CSS. Let's switch back to the exercise files, and let's open up demo.html up in a Text editor to see what Photoshop copied. So now in our Text editor inside of the style area, let's hit Cmd or Ctrl+V to paste. And here we can see all of the properties that Photoshop copied for us.
going to open the preview up here a little bit. So here we can see we have our border style, we have a width, the color, the radius set to 50%. This is what gives us a circle shape in CSS for HTML elements. And then notice now we have all of these three background images, one for the Mozilla browser, one for Web Kit, and one for Internet Explorer. And then we have our box shadow, which is the drop shadow that's being converted, and then all of the other properties. So while every layer style in Photoshop is not supported in CSS, all of the ones that are supported are going to be converted to CSS properties.
So our Stroke is going to get converted to a border setting. The Gradient Overlay is going to be converted to the background image, linear gradient setting. And the Drop Shadow is going to be converted to a box shadow. Now, in order to preview this, we're going to come up to our ellipse_1 rule. Let's rename this to Image. And then in your browser, you'll see that we now have an ellipse with the gradient in the background. A four pixel white stroke, and our drop shadow showing up around the whole object. So when we start looking at some of these more advanced CSS properties that Photoshop can copy from the Layers panel, you can start to see how quickly we can create styles in HTML that match the styles that we're creating inside of Photoshop.
Note: If you don't have any HTML files of your own, Chris has provided free files to all members of the library, so you can get hands-on experience integrating the CSS.
The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.