- 1). Open your Web page in Notepad or a code editor and locate the "<style>" tags between the "<head>" tags. Add the "<style>" tags if you do not find them:
<style type="text/css">
</style> - 2). Scroll down in the code until you find the HTML element you want to give a drop shadow. You can add drop shadows to almost everything, including DIVs, tables and images. Find the ID name of the tags that create that element:
<div>
...div content...
</div>
Add an ID to the tag if you do not see one already there. Each tag can have only one ID, and you cannot reuse the same ID on the same page. - 3). Add the CSS selector between your "<style>" tags, using an ID name to target an HTML element:
#mydiv {} - 4). Use the "box-shadow" property between the curly braces of the selector to create your drop shadow:
#mydiv {
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
The above code creates a drop shadow that is offset by five pixels from the top and left of the DIV, and the blur radius is set to ten pixels. The last value is the color of the drop shadow. - 5). Add the color value last, such as "rgba(0,0,0,0.5)" to create the color black with 50 percent transparency. Replace each of the first three numbers in the RGBa (Red, Blue, Green and Alpha) code with a red, green and blue value for the color you want. You can also use hexadecimal codes or color names, but these will not give you the same transparency effect.
- Advertisement -
- Advertisement -