CSS3 box-shadow and Visual Studio features

A few years ago, while creating an ASP.NET web site, I decided to add a gradient border to "sex up" the look of the site. Using a sophisticated image editing program, I created a small gradient image. I made sure the ending color of the gradient matched the color of the body in the target page. Here it is:

I added CSS to display it like this:

background-image: url(BlendLeft.ico);
background-repeat: repeat-y;

The CSS replicated the image up and down the left side of the browser window:

Pretty cool, eh? I decided it would be even cooler to have the gradient on all four sides of the window. My goal was to make it look like a soft picture frame.

I spent hours and hours trying to create and use the eight images required.

Top Left Corner

Top

Top Right Corner

Right

Bottom Right Corner

Bottom

Bottom Left Corner

Left

I planned and created, sliced and diced, snipped and stitched, hundreds of different gradient images trying to keep the pixel dimensions and color transitions straight. I created several versions of web pages that displayed the images. I tried doing it programmatically where you could enter the start and end colors and the width of the border — the program generated and saved the eight pre-named images. However, I had no control over the gradient algorithms. I never could get smooth transitions between the images. I started to investigate writing my own gradient algorithms but ran out of time. Alas, I failed like a kite in a hurricane, like a fat kid in gym class, like a poodle in a shark tank.

Then CSS3 came out.

Two of the interesting new features in CSS3 are text-shadow and box-shadow. Shadows are traditionally used to give a three-dimensional effect to visual elements. While studying and playing with these new features, I was surprised to find the shadows could be placed anywhere and the box-shadow property had an inset tag….hmmm.

I used this on an html body element:

box-shadow:0050pxgreen inset;

…and got this:

Yippee ki-yay!!! This is EXACTLY what I spent hours trying to do…in one line of code.

Multiple Browser Launch

But you do get some help from Visual Studio. In the following pull-down select "Browse With…"

Unsurprisingly, you get the "Browse With" window:

As you can see, you can select multiple browsers. Hold down the Control Key and click the browsers you want.

Then click the 'Set as Default' button.

You can hit Cancel to exit the window, the settings are remembered.

Now the selection says "Multiple Browsers" and when you start the web site, all the browsers you selected will be launched. It really speeds things up when you are in tweak-check-tweak-check-tweak-check mode. I wish there was a setting to automatically save all changes before launching the browsers.