Click here to Skip to main content
15,867,453 members
Articles / Web Development / XHTML

Image Shadow UserControl for ASP.NET 2.0

Rate me:
Please Sign up or sign in to vote.
4.29/5 (3 votes)
26 Oct 2008CPOL2 min read 31.2K   407   25   1
This ASP.NET 2.0 UserControl will add a shadow to an image on your webpage.

DemoImg.jpg

Introduction

This ASP.NET 2.0 UserControl will add a shadow to an image on your webpage (see the sample image above).

Background

Recently, I was developing a web-shop for a customer who wanted a shadow on the product images, to give them a more appealing look. Unfortunately, no ASP.NET 2.0 image control supports the drop shadow feature. So, I started searching the web, and stumbled upon Brian Williams’ great tutorial Onion Skinned Drop Shadows. Immediately, I realized that this was what I was looking for. Thanks Brian for this beautiful tutorial.

When I read the features listed below:

  • Automatically expand and contract to fit any object, without specifying widths.
  • Allow you to modify the shadow depth with no image manipulation.
  • Render the same across all browsers without cutting any corners.

I knew that this could be a great user control for any website. So, I fired up Visual Studio and started coding. The result was a user control with only six properties:

  • ImageUrl
  • Width
  • Height
  • Style
  • OffsetX
  • OffsetY

The ImageUrl property is where you set the virtual path of your image. The width and height properties are optional. With the Style property, you can add styles to your image – margin or borders etc. The OffsetX and OffsetY are the width and height of the shadow.

Using the Code

  • Download the source code and unzip it.
  • Add the two files ShadowImage.ascx and ShadowImage.ascx.vb and the image folder to your project.
  • Drag the control from your Solution Explorer to an ASPX page in Design mode.
  • Switch to code view and add attributes like shown below.
  • Press F5 and run your solution.
ASP.NET
<uc1:shadowimage id="ShadowImage1" runat="server" 
         Width="160" ImageUrl="myimage.jpg" 
         OffsetX="8" OffsetY="8" 
         Style="border:2px solid #666666" />

Points of Interest

This control only supports images – that was what I needed. If you want to make it clickable, just substitute the image with an ImageButton and raise a public event when it’s clicked. You could easily add a shadow to any object, as it automatically expands and contracts to fit any object, without specifying widths. You should also visit Brian Williams’s tutorial, Onion Skinned Drop Shadows, for more details and extra shadow modes...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder In2Software
Denmark Denmark
Søren is the proud founder of In2Software.
A danish software house delivering professionel software solutions for the web and your desktop.

Comments and Discussions

 
GeneralThanks Pin
Dinesh_k8-May-09 2:13
Dinesh_k8-May-09 2:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.