<

Box Shadow Effect in CSS

Posted on
6,549 Points
149 Views
4 Endorsements
Last Modified:
Published
Experience Level: Beginner
4:18
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
0 Comments

Suggested Videos

Title Views Activity
Using Google Font API in CSS 69
Introduction to CSS (Part 1) 80
Introduction to HTML (Part 1) 111
Introduction to PHP: Building the Form 442
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Enroll in these four OWASP courses: Avoiding Hacker Tricks, Forgery and Phishing, Proactive Controls, and Threats Fundamentals. Also learn a basic introduction to web design where you can implement these OWASP security measures.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month