As I started in this blog post, I’m creating jQuery based samples for all of my origional Ajax and Ajax Control Toolkit guidance. (Find it here.)

In this video I demonstrated adding “DropShadow” visual effects to ASP.NET controls using the DropShadow Control Extender from the ASP.NET Ajax Control Toolkit.

As you might expect, and as you are probably getting used to hearing, “there’s a jQuery Plugin for that”.

You can grab the jQuery “Drop Shadow” plugin HERE.

One of the super powerful things about jQuery is that you can easily select (and apply attributes) via a number of criteria like CSS Class, Element Id, type, etc. For an introductory tutorial on jQuer Selectors read here, for the API documentation read here.

We can add a dropshadow to an ASP.NET container by assigning that container a specific CSS class or ClientId. (Please review ASP.NET 4′s ClientId features HERE.)

It will look like this.

and the code looks like this…..


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <script src='Scripts/jquery.dropshadow.js' type='text/javascript'>
	</script>
    <script type='text/javascript'>
            $(document).ready(function () {
                $('.rounded').redrawShadow();
                $('#Panel3').redrawShadow();
            });
    </script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
     ContentPlaceHolderID='MainContent'>
    <h2>Welcome to ASP.NET!</h2>
    <br />
    <asp:Panel ID='Panel1' runat='server' ClientIDMode='Static'
               style='background-color:#acc; padding:5px; width: 400px;'>
      <p>&amp;nbsp;Some Developer Links</p>
	  <ol>
	    <li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
		</li>
      </ol>
    </asp:Panel>
    <br />
    <asp:Panel ID='Panel2' runat='server' ClientIDMode='Static'
         style='background-color:#acc; padding:5px; width: 400px;' 
		 class='rounded'>
      <p>&nbsp;Some Developer Links</p>
	  <ol>
	    <li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
		</li>
      </ol>
    </asp:Panel>
    <br />
    <asp:Panel ID='Panel3' runat='server' ClientIDMode='Static'
         style='background-color:#acc; padding:5px; width: 400px;'>
      <p>&amp;nbsp;Some Developer Links</p>
	  <ol>
	    <li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 1</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 2</a>
		</li>
		<li>
		<a href='http://misfitgeek.com' target='_blank'>Developer Link 3</a>
		</li>
      </ol>
    </asp:Panel>
    <br />
</asp:Content>

Note the inclusion of the jQuery.dropshadow.js file in line 4.

And then the 2 calls to redrawShadow()


<script src='Scripts/jquery.dropshadow.js' type='text/javascript'>
</script>
<script type='text/javascript'>
		$(document).ready(function () {
			$('.rounded').redrawShadow();
			$('#Panel3').redrawShadow();
		});
</script>

The first call applies a Drop Shadow to any HTML Element who’s class is set to “rounded” and the second applies a Drop Shadow to any element who’s Id is set to “Panel3″.

You can download a working sample HERE.

If you have a specific usage requirement for Drop Shadows, please email me !

Stay tuned.