4 ms·

CSS3PS: Convert Photoshop layers to CSS3

54 points by bmcfeeley 14y ago

css3ps 14y ago
Hope You like it ;)
stove 14y ago
wow.
dyml 14y ago
This is really nice, it's very similiar to http://csshat.com/ http://csshat.com/ though?
- wernah 14y ago
  very similar, except the whole free thing.
- elliotanderson 14y ago
  CSSHat is a commercial self contained plugin CSS3PS is a free plugin that relies on a web service for processing
- TorbjornLunde 14y ago
  CSSHat (currently) does not support Windows.
- DanielOcean 14y ago
  I noticed that csshat isn't very usable. It generates a lot of code that is hard to edit and further customize.. anyone notice anything different for css3ps?
pstadler 14y ago
I'm looking for an app that does the opposite, since IE is still around ;-)
- joshstrange 14y ago
  Check out LayerCake if you want to easily "cut up" a psd into it's individual images. With LayerCake you can even set it up to auto-export your images every time you save the psd.
hendrik-xdest 14y ago
Does this only work for vector objects enhanced by layer styles? What would happen if I wanted to extract, for example, the CSS3PS logo? I don't have Photoshop ready but would like to show this to creative. That's why I ask instead of testing it myself :)
- css3ps 14y ago
  at this moment you will get just div with logo size and if it use layer effects they will also convert to this CSS3 div we will add export raster layers as images but lates now we have list of more priority features
  - axx 14y ago
    If i can throw a PSD file at your site, and get "valid" html5 and CSS3 back, please submit another story to hackernews.
css3user 14y ago
nice work!! Can we have some info on the "list of more priority features" ;)
- css3ps 14y ago
  we will update our site on the next week stay tuned for more question you can write to support@css3ps.com
timc3 14y ago
Love the install instructions and site. Well done.
monkeybread 14y ago
Agree with csshat. It works great but the code is really difficult to grasp. Going to give css3ps a try.
hippich 14y ago
Nice site design. And probably very useful app for designers. On a side note what I discovered yesterday - you can create nice vector graphics in InkScape (free tool), open its source (it's just XML) and copy-paste <svg>...</svg> into HTML page and bang - you got your design in your page and you can manipulate each aspect of this image via JavaScript just like you would manipulate plane HTML code. I bet it do not work across browsers tho...
mnicole 14y ago
Yay! Clean code that makes sense to those just learning CSS (as opposed to CSSHat just that spits garble at you for $30) and a beautiful introduction. Love that it's free and Windows-compatible too. Interested in seeing how it compares to this project as well: http://dribbble.com/shots/591127-Codie-CSS3-Photoshop-Plug-in http://dribbble.com/shots/591127-Codie-CSS3-Photoshop-Plug-i...

54 points by bmcfeeley 14y ago

css3ps 14y ago

Hope You like it ;)

stove 14y ago

wow.

dyml 14y ago

This is really nice, it's very similiar to http://csshat.com/ http://csshat.com/ though?

wernah 14y ago
very similar, except the whole free thing.
elliotanderson 14y ago
CSSHat is a commercial self contained plugin CSS3PS is a free plugin that relies on a web service for processing
TorbjornLunde 14y ago
CSSHat (currently) does not support Windows.
DanielOcean 14y ago
I noticed that csshat isn't very usable. It generates a lot of code that is hard to edit and further customize.. anyone notice anything different for css3ps?

pstadler 14y ago

I'm looking for an app that does the opposite, since IE is still around ;-)

joshstrange 14y ago
Check out LayerCake if you want to easily "cut up" a psd into it's individual images. With LayerCake you can even set it up to auto-export your images every time you save the psd.

hendrik-xdest 14y ago

Does this only work for vector objects enhanced by layer styles? What would happen if I wanted to extract, for example, the CSS3PS logo? I don't have Photoshop ready but would like to show this to creative. That's why I ask instead of testing it myself :)

css3ps 14y ago
at this moment you will get just div with logo size and if it use layer effects they will also convert to this CSS3 div we will add export raster layers as images but lates now we have list of more priority features
- axx 14y ago
  If i can throw a PSD file at your site, and get "valid" html5 and CSS3 back, please submit another story to hackernews.

css3user 14y ago

nice work!! Can we have some info on the "list of more priority features" ;)

css3ps 14y ago
we will update our site on the next week stay tuned for more question you can write to support@css3ps.com

timc3 14y ago

Love the install instructions and site. Well done.

monkeybread 14y ago

Agree with csshat. It works great but the code is really difficult to grasp. Going to give css3ps a try.

hippich 14y ago

Nice site design. And probably very useful app for designers. On a side note what I discovered yesterday - you can create nice vector graphics in InkScape (free tool), open its source (it's just XML) and copy-paste <svg>...</svg> into HTML page and bang - you got your design in your page and you can manipulate each aspect of this image via JavaScript just like you would manipulate plane HTML code. I bet it do not work across browsers tho...

mnicole 14y ago

Yay! Clean code that makes sense to those just learning CSS (as opposed to CSSHat just that spits garble at you for $30) and a beautiful introduction. Love that it's free and Windows-compatible too. Interested in seeing how it compares to this project as well: http://dribbble.com/shots/591127-Codie-CSS3-Photoshop-Plug-in http://dribbble.com/shots/591127-Codie-CSS3-Photoshop-Plug-i...