Update: the export CSS feature is already live in the December update to Photoshop CS6. Thanks Tom!

I have been doing a lot of CSS design recently and have tried many different tools and workflows. One of my favorite is a workflow that is a little different in that it uses Edge Animate, which is available with a free Creative Cloud account, to generate my finished CSS code. Now Edge Animate is an amazing CSS animation tool, but in addition to that you can also easily get the finished CSS code using the developer tools.

The video above combines design techniques with a little bit of developer skills towards the end where we create some reusable CSS classes. I also quickly show the new CSS export feature coming in that is already in the latest update of Photoshop, which can save you an immense amount of time. Below is the finished result running in CodePen.


1
 
Check out this Pen!

If you want to follow along with the video, you can download the start image that I based the designs on. Remember that this CSS code would need to be properly cleaned up and prefixed for production use.

I’d love feedback if you have any,
Lee