Copy CSS: Convert Shapes & Text Effects to CSS

In this tutorial, we’ll talk about the somewhat ill-advised “Copy CSS” feature of Photoshop and how it works. We’ll take code for text and a button that we’ve created and move it over into Dreamweaver and adjust and tweak the CSS code until it creates a graphic similar to what we had in Photoshop. You will see some of the pros and the cons of using this method for creating web design elements or entire web pages.

1. Create a Button in Photoshop

copy-css-photoshop-01

copy-css-photoshop-01b

I’m going to create a new Rounded Rectangle and set the fill to a green color and I’m going to give it a drop shadow and set the color of the drop shadow to a very dark green, set the opacity of the drop shadow to 100%, set the size of the drop shadow to 0, and set the angle of the drop shadow to 90 degrees.

2. Add Text

copy-css-photoshop-02

Grab the Text tool (T) and add a small bit of text to the front of our button. I set the color of the text to white and then dragged it to the middle of the button shape.

3. Copying CSS

copy-css-photoshop-03

You can right-click on any layer at any time and choose “Copy CSS”. This will copy the CSS that it takes to style an HTML element. Properties which the CSS will copy out all depend on how designed and stylized your element is in Photoshop. Things like strokes, drop shadow, positioning (not usually a good thing,) color, gradient, font family, and the list goes on and on.

4. Copy CSS of Layer Group

copy-css-photoshop-04

You can also group multiple layers into a group by selecting those layers in your Layers panel and using the hotkey Cmd/Ctrl + G and you can then right click on that group and choose to Copy CSS to get the CSS code of the layers within that group.

5. The Good, The Bad, and The Ugly

The Good: It’s cool that you can quickly grab the CSS code that would style an element exactly (or nearly exactly) like you had designed in it Photoshop.

The Bad: It’s complicated. It’s complicated because most of the good people who would be using this technique are not very familiar with writing and editing raw CSS and HTML. You still need to build the hooks in your HTML and the actual HTML elements, so while it’s nice (in theory) to copy the CSS right out of Photoshop, it isn’t exactly a silver bullet either.

The Ugly: The code that Photoshop outputs is very ugly. It’s bloated, relies on absolute positioning (almost always a bad idea in web design,) adds many extra lines of code that are not necessary, and, because most of the people who could use this feature the most are the ones who are going to have the least knowledge of what code to add or remove as they shape the CSS into something useable.

6. The Verdict

At the end of the day, it’s an interesting feature of Photoshop, but it’s still a little bit away from being a feasible option when building a website. Messy code and the requirement to still know how to write your own code means that it’s still faster to learn the coding languages and write the code the right way from the get-go.

Be sure to watch the video at the top of this article tutorial for even more detail and info on how I used this technique and really finished this effect and got great results!

Sign up for my newsletter and stay up to date with all the tutvid.com happenings! Thanks for checking this tutorial out!

More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation

81 Comments

  1. Pingback: BluRay Film indir
  2. Pingback: Matka
  3. Pingback: clomed pct
  4. Pingback: Economics Tuition
  5. Pingback: Wayne Hall
  6. Pingback: Heidi Gaskin
  7. Pingback: Cactus Towing
  8. Pingback: Webdesign
  9. Pingback: ayam laga
  10. Pingback: satta matka
  11. Pingback: satta matka
  12. Pingback: Agen Bandarq
  13. Pingback: yandex ankara
  14. Pingback: roidpharm
  15. Pingback: ICQ Chat
  16. Pingback: best anabolics
  17. Pingback: de nature malaysia
  18. Pingback: SEO Techniken
  19. Pingback: de nature semarang
  20. Pingback: venus factor
  21. Pingback: Obat Kencing
  22. Pingback: obat kencing nanah
  23. Pingback: eko priyanto
  24. Pingback: harga
  25. Pingback: apa
  26. Pingback: herpes
  27. Pingback: Obat Kencing Panas
  28. Pingback: untuk
  29. Pingback: kemaluan bernanah
  30. Pingback: digg
  31. Pingback: de nature
  32. Pingback: agen
  33. Pingback: koja
  34. Pingback: di
  35. Pingback: di
Leave a comment
Leave a comment

Your email address will not be published. Required fields are marked *