- 1). Open your Web page in Notepad or the code editor of your choice and check for a pair of "<style>" tags between the "<head>" tags in your code. You will find this code near the top of the file. Add this code if no "<style>" tags exist:
<style type="text/css">
</style> - 2). Create a style rule that selects a class and add settings for the "box-shadow" property. Give the "box-shadow" left and top offset values first, starting with the left. Add to those values a third value for the blur radius, which controls the amount of blur used for the shadow. The last value is the shadow's color:
.shadow {
box-shadow: 5px 5px 20px black;
} - 3). Replace your hexadecimal or color name value in the "box-shadow" property with an RGBa (Red, Green, Blue and Alpha) code to establish control over the transparency of your shadow. When writing an RGBa code, give it the red, green and blue values of the shadow color you want, followed by a transparency value between zero and one:
.shadow {
box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}
Get your red, green and blue color values from a graphics editor or an online color picker. The code in the above sample creates a shadow offset by five pixels from the left and top with a blur radius of 20 pixels and a black color at 50 percent transparency. - 4). Add the class name to any HTML tag to which you want to add a drop shadow:
<div>
Content here...
</div>
Use the class name on as many tags as you need.
previous post
next post