<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Box Shadow Effect in CSS

Posted on
6,546 Points
146 Views
4 Endorsements
Last Modified:
Experience Level: Beginner
4:20
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property

Video Steps

1. Start with a normal styled element, such as a div.

2. In the element's style, type the box shadow property: "box-shadow:"

3. Define the shadow's appearance using four different measurements and a color

4. The first pixel measurement is the horizontal position of the shadow; positive values move the shadow to the right and negative values move the shadow to the left of the lement

5. The second pixel measurement is the vertical position of the shadow; positive values move the shadow down and negative values more the shadow to the top of the element

6. The third pixel measurement is optional, but it adjusts the blur of the shadow; a value of 0 will lead to a shadow with straight edges; a higher value will lead to a blurrier, less defined shadow

7. The third pixel measurement is also optional and adjusts the overall size of the shadow; a larger value will result in a more spread out shadow that is further from the element

8. The color can be defined by a hex code or even an RGBA value

9. For maximum browser compatibility, the box-shadow property should be copied and pasted, each time with a different compatibility prefix (-webkit-, -moz-, and -o-)

4
Comment
0 Comments

Featured Post

PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Next Video:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month