About Shadows! Ajax Control Toolkit DropshadowExtender

I've always wished that the Ajax control could create a "fuzzy" shadow.  don't get me wrong, I think it's GREAT that it's included in the toolkit as is, but it's a little lacking.  In a previous blog entry I had shown a small hack using recursive extenders to create a fuzzy effect.  Here's a simplified result:

shadows1

The desired result is to give a more realistic shadow.  It can be accomplished by "stacking" the dropshadowextender on the same object, and varying the width property, and the opacity property.

<Ajax:DropshadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="pnl1" Opacity=".9" Width="2" />
<Ajax:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="pnl1" Opacity=".7" Width="3" />
<Ajax:DropShadowExtender ID="DropShadowExtender3" runat="server" TargetControlID="pnl1" Opacity=".5" Width="4" />
<Ajax:DropShadowExtender ID="DropShadowExtender4" runat="server" TargetControlID="pnl1" Opacity=".3" Width="5" />
<Ajax:DropShadowExtender ID="DropShadowExtender5" runat="server" TargetControlID="pnl1" Opacity=".1" Width="6" />

 

In a follow-up Post, we'll create a custom control that accomplishes the same thing without such bloated HTML

Good luck!

Bryan Sampica ( Freakyuno)

No Comments