I am sure that you have personally witnessed the new trends in UI. Everything seems to be 'glassy', reflective or whatever the term is these days.
I think it was Apple that first mass-produced virtual glass on iTunes in their CoverFlow control - but it has been in other applications and now all over the web. I recently had a requirement within one of my web projects that asked for glass - but it had a twist. The client also wanted the site to be able to be themed.
Creating a shadow in an object in code is simple - you take the image, add some space to the bottom, flip the image and draw it upside down, add a gradient from partially opaque to the background color as you go down, and, you have a fancy, glassy, faded shadow!
But what if you can't determine what the background is at runtime, for example like on a website? This is the exact problem with themes and glass together. The design of the site meant that anything could be a background - even another image. I could never use a project like Kel whipped up on CodePlex - because I can't pass in a background Color parameter, since I don't know it. I could have forced the theme to a consistent color, but that would be limiting, and potentially not what the client wants.
Our next course of action was to see if Internet Explorer and the other browsers could handle Alpha-Blending in the PNG format, since PNG is one of the formats that supports alpha. (JPG and GIF don't, although GIF can have fully transparent sections.) Luckily, most modern browsers could.
The final challenge - how do you get an alpha-blended shadow in an image?
I went back to some Windows Mobile code that I had worked on that
I had based on another article on-line (where, oh where did that article go?) - where I copied the alpha from a GradientFill stencil. The basic process for the entire operation is as follows:
-
Take the original image and resize it to add space for the shadow.
-
Draw the original image at the top
-
Rotate the original image 180 degrees and flip it.
-
Draw the "shadowed" image under the original.
-
Create a new bitmap as a stencil
-
Draw a GradientRect with alpha blending
-
Lock the bits of the stencil
-
Copy the bitmap bits into an array
-
Lock the new image, put the new image bits into an array
-
Copy the alpha channel from the stencil to the new image.
-
Release the bits for the new image.
... Stay tuned for part 2 and source...