HI,

When playing with gradients (after having deleted a "color point"), I got this error on line 84 of tools.js :
"Cannot read property 'length' of undefined element"

Very great tool, btw. Should be added to the real Photoshop ;)

Hi I was wondering what licence you have released this under? thanks!

WebKit has now adopted Mozilla's gradient format: http://www.webkit.org/blog/1424/css3-gradients/

I think Chrome uses the new ones but Safari 5 uses the old ones.

in addition to -moz and -webkit, you could add -o to also add support for Opera.

Would be a great accessibility practice if one could click on a forms label to focus on its input. That's how I expected it and the same way Photoshop does it (at least, if its single option).
To do so all inputs had to be given an ID corresponding to a label.
For example builder.html line 79 would become

<input type="checkbox" id="globalLight"><label for="globalLight">Use Global Light</label> 

Shadow distance can only get a vertical length, not horizontal.

Maybe a slider control is not really fit for a two-dimensional number heh ;)

Global Light seems to be permanently at 90°.

If I tick "Use Global Light" in the Drop Shadow tab, set it to, say, 135 degrees, then go to another tab and tick it it should bounce to 135 - instead it goes to 90.

Firefox 4, Windows 7

It would be great if I can customize the background and see my element on the desired background.
I would also prefer to be able to resize the element to the exact width and height using a resize (transform) menu with input fields rather than just resizing it with the mouse.

by mazuhl:

The elements I'd expect to see it on are the Styles checkboxes and their labels (Drop Shadow, Border Radius, etc.) and buttons OK, Cancel, New Style.

global angle doesn't seem to work in a new loaded style.

I had frequent freezes of the gradient dialog and it's color picker on Firefox 3.6 and Chrome 12.
This is what I do:

1. Open new session of the LayerStyles Editor
2. Pick Background, leave the linear gradient selected and click on the gradient to get to the Gradient dialog
3. Pick the first lever of the gradient slider and change it's color
4. Pick the second lever of the gradient slider and change color, now this second box usually freezes and neither OK nor Cancel works and I can only restart the session.

The angle dial allows the input negative numbers. When the focus is changed, an alert appears saying that an integer value between 0 and 360 is required.

Opera 11 now supports linear gradients. Maybe it's a good idea to add its syntax to the generated css code. The syntax is (as far as I can tell) the same as the mozilla syntax, except it uses the -o- prefix.

Choose which corner to round doesn't work

(Win7 Chrome 12 Dev)

by lambdaq from reddit

Border radius can get two improvements

• Border radius per corner works weird. It seems to be write-only. Needs a clearer interface.
• Elliptic border radius (e.g. "border-radius: 10px/20px")

It seems impossible to make gradients with transparent colors in them. Only the whole gradient can get opacity, which is weird and does "flow" with the way CSS works. I guess the color chooser simply needs an opacity slider as well, a bit like in Inkscape maybe.

The colorpicker doesn't work right when the CSS Code is shown. The reason for this is firefox's css flex-box implementation which doesn't resize the flex-boxes if one changes it's size.
Solution: don't use flex-box

The buttons need a hover effect to give feedback to the user that something is happening, because it looks sometimes like it froze.

When trying to change a number (for example, Opacity or Angle) I can't use the number pad to the right of my keboard (and I did remember to turn Num Lock on!). Numbers above the letter keys work fine.

Firefox 4, Windows 7.

Would be good to include support for negative values of spread distance - http://www.w3.org/TR/css3-background/#the-box-shadow

Maybe also rename 'size' to 'spread' to match with the CSS terminology?

It should be possible to make shadow size negative as well. It sounds odd, but in stead of making an outer shadouw bigger, it becomes smaller. And the other way around for inner shadows.

The same goes for distance.

Solution: sidebar

Great tool, how about adding SCSS and SASS next to CSS as possible Stylesheet output?

Hey :) LS looks awesome. However I can't seem to put a number into the input at the border radius section. Also when deleting the 0 from the input it gets replaced by NaN.

(using Chrome 11)

/ css / style.css line 5

font: 12px/14px "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;

Can't be done for everything, but a bit of IE support would be nice.

E.g.
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

Opera supports linear gradients using the -o- prefix

LOVE it.

But would be nice to see an option to create multiple drop/inner shadows on the object (as is possible through CSS).

Also would be great to have a text styling option, to style text...rather than an object. So you can recreate stuff like borders (using shadows) etc.

    ZeroClipboard.setMoviePath( 'http://localhost/~mrflix/LayerStyles/js/zeroclipboard/ZeroClipboard.swf' );

https://github.com/mrflix/LayerStyles/blob/master/js/codebox.js#L67

it does not work on local copies. :(

the angle input field and global angle checkbox jump in a new row

(win 7, chrome 12 dev)

screen:
http://i.imgur.com/L8eD0.png

by lambdaq from reddit