Fancy Boxes using 'border-radius' and 'box-shadow' - January 2015

If you download this tip please consider making a modest donation.

Stand Out Fancy Boxes - One of my clients wanted a couple text boxes to 'stand out'. He suggested that the box contain a 3D affect. I searched the web and discovered style settings 'border-radius' and 'box-shadow' which did the trick. This tip builds upon the November 2010 tip - Add 3D a Web Theme. It shows how to add a theme. Click here to view that tip. This is a sample of a 'Plain Jane' box and a 'Fancy Box'.


Samples Before and After

Demo App - I wrote a VB.Net, Asp.Net application that demonstrates the features. Click here to run the demo. Enter values then click the 'Apply' button to see the changed Sample Fancy Box.

Values - Enter appropriate values in the demo then click the 'Apply' button.

Colors, Borders and Font Settings - Click here for More Info
Values Description Sample
BackColor The boxes background color. Can be a named color or hexadecimal values. DarkBlue or #00008B
ForeColor The text color. Can be a named color or hexadecimal values. Gold or #FFD700
Border Width Can be any number. 3
Border Radius The roundness' of the box. The larger the number the more rounded the corners will be. 10
Font Point Size The size of the font in points. The larger the size the large the font will be. 10
Font Bold If checked the font is bolded. Yes
Shadow Settings - Click here for More Info
Horizontal Offset The side by side shadow offset in pixels. Can be a positive or negative number. 10
Vertical Offset The top and bottom shadow offset in pixels. Can be a positive or negative number. 10
Blur Distance If the blur value is zero, the shadow's edge is sharp.
Otherwise, the larger the value, the more the shadow's edge is blurred.
10
Blur Spread Distance Positive values cause the shadow shape to expand in all directions by the specified radius.
Negative values cause the shadow shape to contract.
0
Shadow Color The shadow's color. Can be a named color or hexadecimal values. DarkGray or #A9A9A9
Insert An inset keyword, if present, changes the drop shadow from an outer shadow
(one that shadows the box onto the canvas, as if it were lifted above the canvas)
to an inner shadow (one that shadows the canvas onto the box,
as if the box were cut out of the canvas and shifted behind it).
No

Click here to link to a Sortable Color Chart

Buttons - The demo's buttons.

Button Description
Reset Reset the values to the original settings.
Apply Apply the settings and update the Sample Fancy Box.
Next Sample Cycle through several sample settings.
Link to Documentation Display this page.

Next Samples

Samples Created using the Next Sample Button



Operative Code

This VB.Net code can be found in class module: cFancyBoxes.vb

Download the VB.Net Code

Download the source code by clicking on the zipped file name. Click here to run the demo application.

Download - Source Zipped File Size
VS/2008 VB.Net, ASP.Net Solution FancyBoxes.zip 123K

Previous Tip    Tip Index    Next Tip

Home

Updated 2015/01/31