CSS3 + PS

Creation & Innovation

Moderator: Moderators

CSS3 + PS

Postby beniston » Sun Feb 17, 2013 11:15 pm

This is a free photoshop plugin that converts your layers to CSS3.

http://css3ps.com/

Please comment on its usefulness designers. They claim that this plugin has something which Photoshop doesn't have.
beniston
 
Posts: 502
Joined: Wed Nov 02, 2011 4:35 am
Location: Cochin
Tell us why you would like to become a WyseLabs Member: To share the knowledge....

Re: CSS3 + PS

Postby finoy » Mon Feb 18, 2013 12:42 am

Yes Beniston, it's very useful. previously we did this things support of 2, 3 websites. like:
http://www.colorzilla.com/gradient-editor/
http://border-radius.com/
http://css3gen.com/box-shadow/
http://css3generator.com/
finoy
 
Posts: 14
Joined: Thu Jun 21, 2012 10:34 pm
Tell us why you would like to become a WyseLabs Member: am the part of this website. :)

Re: CSS3 + PS

Postby RaJesh Balakrishnan » Mon Feb 18, 2013 4:33 am

Thank you for sharing, I tried and working fine with CS5 :D

CSS3Ps can interpret Photoshop layer styles really well. But be careful, it doesn’t understand all layer styles available in Photoshop. CSS3Ps only understand layer styles which widely used in web design. Supported layers styles are: Stroke, Inner Shadow, Drop Shadow, Color Overlay, Gradient Overlay and Inner Glow. However, after testing we found out that CSS3Ps do not understand stroke type outer, inner or center. It always set the stroke setting to outer. Which means if you use inner shadow 2px to make 1 pixel inset style on a button, in CSS3 codes you will ended up in 2 pixels inset shadow.

More about CSS3Ps & Supported Features
o Multiple Layers – You can select several layers and groups of layers and convert them in one click
o Prefixes – support prefixes for all popular browsers: “-webkit-” for Safari and Chrome, “-moz-” for Firefox, “-ms-” for IE 10 and “-o-” for Opera.
o Blending – for now only normal modes supported but will add other blending modes soon
o Size – convert size of layer (shape or bitmap) to CSS width and height properties
o Border Radius – calculate border radius for shape if it is possible to represent the shape as a rectangle with rounded corners; you can convert really a lot of shape types
o Bevel and Emboss – do not support it yet
o Stroke – is converted into CSS border property
o Inner Shadow – is converted into CSS box-shadow property
o Inner Glow – is converted into CSS box-shadow property
o Satin – we do not support it
o Color Overlay – do not support it for now but will add it soon
o Gradients Overlay – for now support only linear gradients but they will add radial and reflected gradients soon
o Pattern – do not support it for now but they are working on it
o Outer Glow – is converted into CSS box-shadow property
o Drop Shadow – is converted into CSS box-shadow property
o Text Layers – working on adding styles for text layers
RaJesh Balakrishnan
 
Posts: 104
Joined: Tue Nov 28, 2006 4:07 am
Location: India


Return to Web Design

Who is online

Users browsing this forum: No registered users and 2 guests

cron