When designing a web page, if a developer wants to create a realistic button with a press-down effect on click, which combination of box shadow properties should they manipulate?
- box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 4px rgba(0, 0, 0, 0.5);
The correct combination is option 1. This creates a box shadow with an inset effect, simulating a button press-down effect.
Loading...
Related Quiz
- Which CSS property adjusts the transparency of an element?
- The primary purpose of functions in SASS is to ________.
- In terms of SEO, what is a potential downside of using excessive icon fonts on a website?
- The ::after pseudo-element in CSS is typically used to ________.
- A developer is attempting to create a flexible layout where the widths of two columns (side-by-side) adapt to the viewport size while maintaining a gap between them without using any framework. Which combination of box model properties and units should they use to accomplish this?