CSS Box-Shadow
Boxes with shadows can be visually pleasant and even elegant. They are relatively easy to make with CSS.
To make a CSS box with a shadow, two divs are required.
-
A div with a background-color that will be the shadow.
-
A div to hold the content in the box.
Both the shadow div and the content div need to be the same size.
When the content div is published slightly offset on top of the shadow div, the effect is as of a shadow. (In the HTML code, the content div is within the shadow div. But the published effect is the content on top the shadow.)
You do not have to know how it works to be able to use it.
In this article, you'll find:
-
A CSS Box-Shadow demonstration. Also, copy and paste code to duplicate the demo on your web page.
-
A CSS Box-Shadow generator. Copy the generated code, paste it into your web page, and then insert your box content.
-
Some geeky details in case you want to manually tweak your CSS box or its shadow.
-
Implementation steps.
A CSS Box-Shadow Demonstration
CSS Box-Shadow
— Demonstration —
The source code in the article is a complete working example.
On the left is a CSS Box-Shadow demonstration.
Further below is copy and paste source code to duplicate the demonstration. The source code includes CSS definitions for the text content. An inline style floats the box to the left, causing content following it to be placed on the right.
If you decide to study or change the demonstration source code to position the box, understand it is the div with the shadow that gets positioned. Margins affect the shadow div. The position of the content div is relative to the shadow div. The "Tweaking The CSS Box-Shadow Code" section of this article has more information.
Here is the copy and paste source code for the above CSS Box-Shadow demonstration.
A CSS Box-Shadow Generator
Use this CSS Box-Shadow generator to create your own CSS box shadows. The CSS box shadow code is instantly generated.
The first three fields are required. Everything else is optional.
N O T E —
The CSS box-shadow generator in the WebSite's Secret members area can
also generate code to:
- Float the box left (text printing on the right).
- Float the box right (text printing on the left).
- Place the box in an absolute position on the page regardless where other content is or is not published.
- Use an image instead of a background-color for the shadow.
Click here
to get a WebSite's Secret membership.
Tweaking The CSS Box-Shadow Code
This section can be ignored if you won't be tweaking the code. But do read the implementation section toward the end of this article.
The generated CSS Box-Shadow code is generously commented. The comments and the information in this section may help should you wish to modify the code.
The "mybox" class is where the width and height are defined.
When position:absolute is desired, the "mybox" class is the place to define it. Example:
When an image is desired for the shadow instead of a solid color, the "boxshadow" class may contain an image the size of the div in lieu of a background color.
The shadow div uses both classes "mybox" and "boxshadow".
The content div uses both classes "mybox" and "boxcontent". The content div is within the shadow div.
When padding is desired, a div with margins is put in the content div. It's done this way to be consistent accross browsers — some enlarge the div by the amount of padding, not what we want here.
When floating the box left or right, understand it is the div with the shadow that gets positioned. The position of the div with the content is relative to the shadow div.
Therefore, if the box floats to the left and the shadow is on the right (see the CSS Box-Shadow demonstration, further above), the content will be placed outside the left margin by an amount equal to the width of the shadow. A margin-left definition will need to be specified in the shadow div to move the box toward the right by that amount.
Similarly, when other margins are specified for a floating box, to put space between text and box for example, the margin amounts may need to be adjusted to compensate for the width of the shadow.
CSS Box-Shadow Implementation Steps
These are the three steps for implementing the CSS box with shadow:
Generate the CSS Box-Shadow code.
-
Paste the code into your web page.
-
Replace "[BOX CONTENT HERE]" in the code with the content for your box.
If the content doesn't fit, either tweak the box size (the "mybox" class contains the size definitions) or re-generate the code with an adjusted size.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
© Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
