Adobe Photoshop CC exports CSS as CSS3. For what I am telling here, that is not important.
Tip
Search for CSS3.
We shall now draw a rectangle with rounded corners in Photoshop. See the screendump above.
A is the tool. Choose Shape at B. C: no filling. D: red border. Choose a width at E and a normal line at F. Choose any value for G.
Draw the rectangle. Make sure its layer (see H) is selected.
Right click on that layer (or open the layer palette menu, of choose in the main menu Layer) and choose Copy CSS. See below.
* The selected layer cannot be locked!
* Would you like to export the CSS of a shape layer and of a text layer together, then forst put both layers in a new group, and use that new layer.
* Writing a text, you automatically get a text layer. When drawing an object like a rectangle f.e. you only get a shape layer if you have selected Shape at B. If not then exporting the CSS fails.
Open Notepad and do Edit > Paste.
Or open Word or choose an OpenOffice text document (in that case do that before exporting the CSS) and do Edit > Past.
Or open a new CSS file in Dreamweaver and also do Edit > Paste.
This is the Photoshop CSS:
.Rounded_rectangle_1
{
border-width: 17.85px;
border-color: rgb( 255, 0, 0 );
border-style: solid;
border-radius: 30px;
position: absolute;
left: 293px;
top: 189px;
width: 398.3px;
height: 374.3px;
z-index: 2;
}
See it in Dreamweaver under this line:
Next I add a text. See the next screendump:
As you can see, now I have a background layer, a shape layer and a text layer. To be able to export the CSS of both, I have as I said before to put the shape layer and the text layer in a new group layer, and choose that layer for the CSS export.
See the CSS here:
.Group_1
{
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 800px;
z-index: 5;
}
.Text
{
font-size: 72px;
font-family: "Garamond";
color: rgb( 44, 234, 241 );
font-weight: bold;
text-align: left;
position: absolute;
left: 224.929px;
top: 99.997px;
width: 167px;
height: 50px;
z-index: 4;
}
.Rounded_rectangle_1
{
border-width: 25px;
border-color: rgb( 255, 0, 0 );
border-style: solid;
border-radius: 30px;
position: absolute;
left: 194px;
top: 212px;
width: 191px;
height: 269px;
z-index: 3;
}
.Layer_0
{
background-image: url("images/Laag 0.png");
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 800px;
z-index: 2;
}
* As you might know, you can turn a Photoshop layer into a Smart Object, for working with it in other Adobe applications. But you can not export CSS from a Smart Object.
