Tip:
Highlight text to annotate it
X
Hi Guys, Today I'm going to show you how to get CSS File from Photoshop. It's a pretty
simple and easy way to do that. Open your PSD file with your Photoshop or create any
shape with your Photoshop. I've got one of my existing Photoshop simple shape. All you've
to do is click the right button on your shape from where you want to get the CSS code. Then
you will see a option called Copy CSS on the top. That's it. So, now let's take a look
to put the code on a simple HTML file to check is this really working or not! I've opened
my code editor called sublime text 3. I will create a new HTML file called photoshop.html
and I will save it on my desktop. Then I will write simple and very basic HTML5 structure
to check the CSS code. I will create a div with a Class name circle and then I will paste
the CSS Code what I've copied from Photoshop to this HTML document head element. And now
here you see, I've got all of this CSS styling code from Photoshop. All I've to do is now
change the Class name to my own class name called circle. So, now let's take a look to
load this photoshop.html file with a browser. It's loading. Yeah, it's working pretty good.
I believe this simple tips will reduce your time how you code your PSD file