One of my visitors asked me how he could create a "shadowed box" on his web page, by which I understood him to mean that he wanted add a shadow to a box, such as that created using a DIV block.
This tutorial requires that you know some HTML and CSS, since it delves into the specific code needed to create that effect. As with all my CSS tutorials, you don't actually have to be an expert, but you do need to know at least a smattering of HTML and CSS, otherwise you won't understand what I'm saying nor will you know how to adapt the code for your site and insert it.
As it happens, CSS has a specific property for creating shadows around an element: box-shadow.
Take the following DIV block as an example.
If the HTML code for the above demo is the following:
The relevant CSS to produce the shadow is:
The 5px part of the box-shadow: 5px 6px #808080 rule specifies the length of the horizontal portion
of the shadow, and 6px the vertical. The colour ("color" if you use a
different variant of
English) is set to grey ("gray") in my example, but you can of course use any colour you want.
(Note that I inserted the border rule in my code above to draw the outline around the box, but
it is not actually needed for creating the shadow. If you want more details about that property,
please read my tutorial on how
to draw a retangular box in CSS.)
If you have a box with rounded corners, you may wonder how you can make the shadow follow the contours of the sides.
The marvellous thing about using box-shadow, as opposed to
manually drawing a shadow,
is that it automatically adjusts itself to the element's frame. Hence the above box needed no extra code to make the
shadow hug the frame of the original DIV block. The rule to create this rounded shadow is exactly the same
as in the first example:
Obviously, the main DIV box code had to be adjusted to make the corners round, but that's a separate topic. The shadow automatically takes the shape of the main box, and so the code for that does not need to be changed.
The shadow does not have to be at the bottom right. If you want, you can cast the shadow in a different direction, so that it appears at the bottom left, top left, or top right.
The trick to doing this is to give a negative value for the horizontal and vertical lengths. For the above
demo, the box-shadow rule was written as:
The first negative -5px puts the horizontal shadow on the left of the box instead of the right,
and the second negative -5px shifts the shadow from below the box to the top. You can mix and
match the negative and positive numbers to give it the effect you want. For example, to get a shadow cast
towards the bottom left, use box-shadow: -5px 5px #808080.
So far, all the shadows that we have created have sharp edges. It's also possible to make the shadow gradually lighter around the edges, fading out until it cannot be seen any more. To do this, you will have to add another number after the horizontal and vertical lengths: the blur radius.
The first two numbers, "10px 10px", specify the horizontal and vertical lengths
as before, and the third number, 4px, is the blur radius. I had to increase the length of the shadow
from my example earlier, otherwise you will not be able to see the colour transition. Note that the numbers must be in
that order: the horizontal length, vertical length, followed by the blur radius. Incidentally, if you are wondering why
it's called a "radius", remember that the shadow will be rounded if the original box had rounded corners.
When the blur radius is omitted, it is assumed to have a value of 0. That is, the space in which blurring occurs has a zero width, giving it a sharp edge. This is why my earlier examples did not need to specify the radius, since the implied default of 0 was exactly what I wanted.
The box-shadow property should work in all modern browsers. If your visitors use Internet Explorer,
they will need at least version 9 for the shadow to appear.
Copyright © 2018-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Shadow to a Box in HTML/CSS
