4 Replies Latest reply on Mar 12, 2015 12:44 AM by Defims

    FEATURE REQUEST: multiple box-shadows in the GUI

    B3NJ_M_N

      I'd like to be able to animate multiple box-shadows in the GUI, on the timeline.

       

      The provision for only one shadow seems really limiting, because there's an incredibly amount of CSS razzle-dazzle that uses multiple drop shadows.

       

      e.g. see this animation:

       

      http://codepen.io/Gertlily/pen/wtbFn

       

      and also see this crazy image to box-shadow converter :

       

      http://codepen.io/blazeeboy/pen/bCaLE

       

      Explanation of the techniques is here:

       

      http://joshnh.com/2012/08/16/drawing-things-with-box-shadow/

       

      and some simple, some similar multiple text-shadow tooling:

       

      http://mothereffingtextshadow.com/

       

      Here's how I think it should work:

       

      Inside the shadow panel, X, Y, Blur, and Spread should be squeezed a bit more in the interface. The attributes in the UI should be in the same order that they ordinarily need to be declared. Please get rid of that dark gray round rectangle inside the Shadow panel. It does nothing but suck space. Now, add a plus symbol at the bottom of the panel, allowing a new shadow declaration to be added. When there exists more that one shadow "declaration" within the panel, add a minus button next to the plus button, allowing the active shadow to be subtracted out. Or if you don't like the minus button, add a little trash can to the bottom of the shadow panel, allowing box-shadow "layers" to be deleted. If you're feeling really generous, make the whole shadow panel like a "layers" panel, allowing the stacking order of the text-shadows to be dragged and dropped. Also, get rid of the numeric attributes display next to the panel title. It's redundant (which is ok in theory) but it isn't parallel with the other panels, which don't have that sort of text.

       

      Here's a very rough quick mockup of this idea (missing the plus sign and trash can):

       

      modifed-box-shadow-UI.png