Jim Meeker's Web Log

Amateur Zymurgist, .Net Hobbyist, Sailor

<July 2008>
SuMoTuWeThFrSa
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789


Navigation

Links

Application Blocks

Subscriptions

News

Visit My Moblog

Jim's Weather Center
Langley AFB

The WeatherPixie - Langley AFB

Post Categories



Design (RSS)

Design
Stupid GUI Tricks #1

While checking out TheServerSide.Net the other day I noticed their search and login text boxes have shadows inside of them.  The look like they as carved out of the web page and I thought they looked kind-a-cool. So I figured out how they did it, or at least a way of doing it. 

On your Style Sheet add the following class:

.shadowbox
{
         background-image: url(../images/shadow.gif);
         border: Solid 1px Black
}

Where shadow.gif is and image that has the shadows along the edges.  Make sure the image is larger than what your textbox will be or you will have tiling problems. Then assign the class to your textbox. It'll look like this:

Text Box with shadow

Just imagine the kind of havoc you can create by putting an animated GIF in there.

 

posted Thursday, February 05, 2004 10:05 PM by jimmeeker with 0 Comments




Powered by Dot Net Junkies, by Telligent Systems