Using the CSS box-shadow Property

The css box shadow property can be implemented for various display scenarios in your web design projects. Let’s take a situation where you are required to display some text in a div element and show it as an information box with the shadow effect. This will be done purely in css with the HTML being used for showing the information inside a div element. In the next few sections, we will go from having a chunk of text that is not quite attractive to an amazing information box having the same text but with better display. We will start off with the following chunk of HTML code.

<div class="shadow">
<p>Wes Anderson umami biodiesel YOLO, Terry Richardson helvetica tousled street art master cleanse selfies Godard cornhole 8-bit pork belly scenester. Blog blue bottle Neutra, polaroid pug cliche dreamcatcher. Ethnic wolf church-key, Wes Anderson tattooed meh tumblr direct trade pug.</p>
</div>

Box-Shadow

This property has been around since css2. However, it can now be applied to images, borders and even text. You can specify the size, color, blur and offset values. You can even define the shadow styling options further with a comma separated list of shadow values. These have a 2 to 4 length value expression specified in the order below.

  • horizontal and vertical offsets
  • blur distance
  • spread distance
  • optional color value
  • optional inset keyword value

The keyword value comes in very handy when you want to create an inner shadow instead of the default outer shadow. The general syntax for the CSS3 box shadow is as follows.

box-shadow: Xpx Ypx Bpx Lpx #color;

Xpx refers to the horizontal offset, Ypx the vertical offset, Bpx the blur effect, Lpx the length of the spread and #color the color.

Adding a bit of css code with the format specified above transforms our chunk of text into an amazing information box!

info-box

CSS code


.shadow {
width:400px;
height:120px;
border: 12px solid blue;
background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 25x 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-moz-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
-webkit-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
12px 12px 0px 8px rgba(0,0,0,0.4) inset;
padding: 5px 20px;
}

As you can see, we have a shadow on our box which does not necessarily have to be square or rectangle in shape. Rounded corners make your site interesting and fun. In this case, the rounded corners have been achieved with the border-top-left-radius and the border-bottom-right-radius elements in the css code. There is a lot more that you can do with the css box shadow property and it comes in very handy in transforming your site into an exciting and fun experience for the user.

You can always play around with the values of the blur and spread distance in order to achieve the effect you need. Always remember to resize your box to fit the text that you have inside the div element. As you can see, CSS3 relies on heavy use of div elements in order to achieve control over the look of the website. There is much more that you can do with the box shadow such as layering several shadows within the box-shadow property, shadow on text, transitioning properties and a bunch of other styling options presented by this element.

In conclusion, the box-shadow property comes in handy when you are looking to achieve that shadow effect and give your text a better look. With this property, your site is totally transformed to an interactive and exciting experience for the user.

Leave a Reply

Your email address will not be published. Required fields are marked *