![]() ![]() ![]() } Adding multiple drop shadows to Box 3 Bonus: Create an Inset Shadow Let's do that with Box 3 by simultaneously adding a blue and green drop shadow: /* Any number of shadows, separated by commas */īox-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green If we want to get fancy, we can add multiple drop shadows to an element using a single box-shadow property. Remember the order of these parameters! Combining Multiple Shadows in a Single Property } Adding a spread radius in addition to a blur to Box 2 Let's add a spread radius of 8px to Box 2: /* offset-x | offset-y | blur-radius | spread-radius | color */ If we want to control the size of the shadow, we can use the spread-radius parameter which controls how much a shadow grows or shrinks. The value of 4px sets the radius of the blur to apply to our drop shadow. Let's apply it to Box 2: /* offset-x | offset-y | blur-radius | color */ This parameter controls how much to blur the shadow such that it becomes bigger and lighter. If we want the shadow to look a little more realistic, we will want to experiment with the blur-radius parameter. Keep in mind that although we used elements here, the box-shadow property can be applied to any other HTML element as well. The third parameter is the color of your drop shadow. A positive x-offset will move the shadow to the right, and a positive y-offset will move the shadow downwards. The offset is relative to the origin, which in HTML is always the top left corner of an element. They set the location of the drop shadow. The first 2 are, respectively, the x-offset and y-offset. To add a basic drop shadow, let's use the box-shadow property on the Box 1: /* offset-x | offset-y | color */ The result is just three black boxes that will be easy for us to add drop shadows to by calling their unique id's: HTML elements setup Let's first set up some basic HTML elements to add our drop shadows to: Box1 We can add a drop shadow to any HTML element using the CSS property box-shadow.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |