<

Box Shadow Effect in CSS

Posted on
6,549 Points
149 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
0 Comments

Featured Post

Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month