MCQs Of Class 25: CSS Shadows
Box Shadow:
1. What does the box-shadow property in CSS do?
o A) Adds a shadow around text
o B) Adds a shadow around an element
o C) Creates a box around an element
o D) Changes the color of the element
o Answer: B
o Explanation: The box-shadow property is used to add a shadow effect around an element's box.
2. Which of the following is the correct syntax for the box-shadow property?
o A) box-shadow: horizontal vertical blur radius color;
o B) box-shadow: blur radius color horizontal vertical;
o C) box-shadow: color horizontal vertical blur radius;
o D) box-shadow: horizontal blur radius vertical color;
o Answer: A
o Explanation: The correct order for box-shadow is horizontal offset, vertical offset, blur radius, spread radius, and color.
3. What value is used to create an inset shadow using the box-shadow property?
o A) inset
o B) shadow-in
o C) box-shadow: inside;
o D) inside-shadow
o Answer: A
o Explanation: The inset keyword is used in the box-shadow property to create an inner shadow.
4. Which of the following is the default value for the box-shadow property?
o A) none
o B) 0px 0px 0px rgba(0,0,0,0)
o C) 0px 0px 5px
o D) 1px 1px 10px
o Answer: A
o Explanation: The default value of box-shadow is none, meaning no shadow is applied.
5. Which property of box-shadow controls the blur intensity?
o A) Radius
o B) Offset
o C) Blur
o D) Spread
o Answer: C
o Explanation: The blur radius determines the softness of the shadow. The larger the blur radius, the softer the shadow will appear.
6. What is the effect of increasing the spread radius in box-shadow?
o A) It increases the size of the shadow
o B) It makes the shadow blurrier
o C) It darkens the shadow
o D) It makes the shadow sharper
o Answer: A
o Explanation: Increasing the spread radius in box-shadow increases the size of the shadow while keeping its color and blur intact.
7. How would you create a shadow that extends both horizontally and vertically from an element using box-shadow?
o A) box-shadow: 5px -5px 10px;
o B) box-shadow: -5px 5px 10px;
o C) box-shadow: 5px 5px 10px;
o D) box-shadow: 10px 10px 5px;
o Answer: C
o Explanation: The box-shadow with both horizontal and vertical offsets (5px 5px) extends the shadow in both directions.
8. Which of the following is the correct way to add multiple shadows to an element?
o A) box-shadow: shadow1, shadow2, shadow3;
o B) box-shadow: shadow1, shadow2 and shadow3;
o C) box-shadow: shadow1; shadow2; shadow3;
o D) box-shadow: shadow1 | shadow2 | shadow3;
o Answer: A
o Explanation: Multiple shadows can be added by separating them with commas in the box-shadow property.
9. What is the effect of a negative value in the horizontal offset of the box-shadow?
o A) The shadow moves to the right
o B) The shadow moves to the left
o C) The shadow moves upward
o D) The shadow moves downward
o Answer: B
o Explanation: A negative horizontal offset shifts the shadow to the left.
10. How can you make a shadow appear lighter in color in box-shadow?
o A) Increase the blur radius
o B) Use a higher alpha value for the color
o C) Increase the spread radius
o D) Increase the horizontal and vertical offset
o Answer: B
o Explanation: Decreasing the alpha value (transparency) of the shadow color will make the shadow appear lighter.
Text Shadow:
11. What does the text-shadow property do?
o A) Adds a shadow to the entire element
o B) Adds a shadow to the text content of an element
o C) Changes the color of the text
o D) Increases the font size of the text
o Answer: B
o Explanation: The text-shadow property is used to add shadow effects to text.
12. Which of the following is the correct syntax for the text-shadow property?
o A) text-shadow: horizontal vertical blur color;
o B) text-shadow: color horizontal vertical blur;
o C) text-shadow: blur horizontal vertical color;
o D) text-shadow: blur color horizontal vertical;
o Answer: A
o Explanation: The correct syntax for text-shadow is horizontal offset, vertical offset, blur radius, and color.
13. Which property of text-shadow controls how far the shadow is displaced from the text horizontally?
o A) Blur radius
o B) Vertical offset
o C) Horizontal offset
o D) Spread radius
o Answer: C
o Explanation: The horizontal offset defines the horizontal displacement of the shadow.
14. What value in text-shadow defines how soft or sharp the shadow is?
o A) Horizontal offset
o B) Vertical offset
o C) Blur radius
o D) Spread radius
o Answer: C
o Explanation: The blur radius controls the softness or sharpness of the shadow.
15. Which of the following is true about the text-shadow property?
o A) It can only be used with headings
o B) It works only on block elements
o C) It can create multiple shadows on text
o D) It only works on text inside a span element
o Answer: C
o Explanation: text-shadow can be used to create multiple shadows on the text by separating them with commas.
16. How do you create a shadow that extends outward from the text using text-shadow?
o A) Increase the horizontal and vertical offset values
o B) Increase the blur radius
o C) Use a negative blur radius
o D) Increase the alpha value of the shadow color
o Answer: A
o Explanation: Increasing the horizontal and vertical offset values will move the shadow outward.
17. What is the effect of a negative value for the vertical offset in text-shadow?
o A) The shadow moves upward
o B) The shadow moves downward
o C) The shadow becomes sharper
o D) The shadow moves to the right
o Answer: A
o Explanation: A negative vertical offset moves the shadow upward.
18. What is the default value for the text-shadow property?
o A) none
o B) 0px 0px 0px rgba(0, 0, 0, 0)
o C) rgba(0, 0, 0, 0)
o D) 2px 2px 5px rgba(0, 0, 0, 0.5)
o Answer: A
o Explanation: The default value for text-shadow is none, meaning no shadow is applied.
19. How would you create a red text shadow with a slight blur effect?
o A) text-shadow: 2px 2px 5px red;
o B) text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5);
o C) text-shadow: -2px -2px 5px red;
o D) text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.7);
o Answer: A
o Explanation: The correct syntax is 2px 2px 5px red, where the shadow is moved 2px both horizontally and vertically with a 5px blur.
20. Which of the following is true about applying shadows to text in CSS?
o A) Only one shadow can be applied
o B) Text shadows cannot be blurred
o C) You can apply multiple shadows
o D) Text shadows only work with span elements
o Answer: C
o Explanation: You can apply multiple shadows to text by separating them with commas.
General CSS Shadow Effects:
21. Which of the following is a valid value for the box-shadow property?
o A) 10px 10px 5px black
o B) 0px 0px 5px rgba(255, 0, 0, 0.5)
o C) inset 0px 0px 10px
o D) All of the above
o Answer: D
o Explanation: All the above values are valid for the box-shadow property.
22. Which shadow type in CSS is typically used for making an element appear raised or elevated?
o A) Inner shadow
o B) Outward shadow
o C) Text shadow
o D) Inset shadow
o Answer: B
o Explanation: Outward shadows, often created using positive offset values, give the effect of an element being raised or elevated.
23. What effect does the inset keyword have on the shadow?
o A) It makes the shadow appear outside the element
o B) It moves the shadow to the left
o C) It creates a shadow inside the element
o D) It blurs the shadow
o Answer: C
o Explanation: The inset keyword makes the shadow appear inside the element, creating an inner shadow effect.
24. Which of the following properties does NOT affect the appearance of a shadow in CSS?
o A) Color
o B) Offset
o C) Border radius
o D) Blur radius
o Answer: C
o Explanation: The border-radius property does not affect shadows. However, color, offset, and blur radius do influence how shadows are rendered.
25. What happens if the blur radius is set to 0 in box-shadow or text-shadow?
o A) The shadow is not applied
o B) The shadow appears sharper with hard edges
o C) The shadow becomes more transparent
o D) The shadow spreads to cover the entire page
o Answer: B
o Explanation: A blur radius of 0 creates a sharp shadow with hard edges.
26. Which of the following is the correct way to apply a blue inset shadow to a box element?
o A) box-shadow: inset 0px 0px 5px blue;
o B) box-shadow: blue 0px 0px 5px inset;
o C) box-shadow: 0px 0px 5px inset blue;
o D) box-shadow: inset blue 0px 0px 5px;
o Answer: A
o Explanation: To create an inset shadow with a color, use the inset keyword followed by the offset, blur, and color.
27. Which type of shadow does the text-shadow property create?
o A) Outer shadow
o B) Inner shadow
o C) Color shadow
o D) Shadow only on text content
o Answer: D
o Explanation: The text-shadow property only applies shadows to text content, not to the entire element.
28. What would be the result of using negative values for both horizontal and vertical offsets in a box-shadow?
o A) The shadow will move to the top-left corner
o B) The shadow will appear blurry
o C) The shadow will not appear at all
o D) The shadow will extend beyond the element
o Answer: A
o Explanation: Negative values for both offsets will shift the shadow towards the top-left corner.
29. In a text-shadow, what does increasing the blur radius do?
o A) Sharpens the shadow
o B) Makes the shadow appear closer to the text
o C) Makes the shadow spread out further
o D) Changes the color of the shadow
o Answer: C
o Explanation: Increasing the blur radius causes the shadow to spread out, making it softer and larger.
30. Which of these CSS properties can be used with shadows to create a more dynamic effect?
o A) Transition
o B) Opacity
o C) Animation
o D) All of the above
o Answer: D
o Explanation: All these properties—transition, opacity, and animation—can be used with shadows to create dynamic visual effects.
Advanced Shadow Effects:
31. How can you create a shadow effect that moves with a hover interaction?
o A) Use transition with box-shadow
o B) Use animation with text-shadow
o C) Use :active pseudo-class
o D) Use @keyframes with box-shadow
o Answer: A
o Explanation: The transition property can smoothly animate a shadow effect when hovering over an element.
32. Which of the following can be used to create a glowing effect around an element?
o A) box-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
o B) text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
o C) Both A and B
o D) None of the above
o Answer: C
o Explanation: Both box-shadow and text-shadow with a bright color and large blur radius can create a glowing effect.
33. What would be the result of using both box-shadow and text-shadow on the same element?
o A) Only the box-shadow will be applied
o B) Both shadows will be applied separately
o C) They will merge into one shadow
o D) Only the text-shadow will be applied
o Answer: B
o Explanation: Both box-shadow and text-shadow can be applied simultaneously to create different shadow effects.
34. In which of the following scenarios would you typically use the inset keyword for shadows?
o A) To create an inner shadow effect for buttons
o B) To create an outer shadow for floating elements
o C) To create text shadows
o D) To animate a shadow
o Answer: A
o Explanation: The inset keyword is used to create an inner shadow effect, typically for buttons or other inset elements.
35. How can you prevent a shadow from overflowing the bounds of its element?
o A) Use overflow: hidden
o B) Use box-sizing: border-box
o C) Use a smaller blur radius
o D) Use position: absolute
o Answer: A
o Explanation: Setting overflow: hidden on an element will prevent its shadow from spilling outside its bounds.
36. What property can be used in conjunction with box-shadow to give an element a "3D" appearance?
o A) transform
o B) border
o C) opacity
o D) background-color
o Answer: A
o Explanation: The transform property can be combined with box-shadow to create a 3D appearance, such as with rotate or translate values.
37. Which of the following properties can be used to control the direction of the shadow in CSS?
o A) angle
o B) rotate
o C) offset
o D) direction
o Answer: C
o Explanation: The offset values (horizontal and vertical) control the direction of the shadow.
38. In box-shadow, what would happen if the spread radius is set to a negative value?
o A) The shadow will shrink
o B) The shadow will expand
o C) The shadow will disappear
o D) The shadow will be positioned inside the element
o Answer: A
o Explanation: A negative spread radius causes the shadow to shrink.
39. Which of the following CSS properties would you use to add a shadow to a border of an element?
o A) border-shadow
o B) box-shadow
o C) text-shadow
o D) border-radius
o Answer: B
o Explanation: The box-shadow property adds a shadow around an element's border.
40. What happens if the color value in box-shadow is set to transparent?
o A) The shadow will be invisible
o B) The shadow will be blue
o C) The shadow will have a blur effect only
o D) The shadow will disappear
o Answer: A
o Explanation: If the color is set to transparent, the shadow will not be visible.
41. What is the default value for text-shadow in CSS?
o A) none
o B) 0px 0px 0px rgba(0, 0, 0, 0)
o C) none rgba(0, 0, 0, 0)
o D) black
o Answer: A
o Explanation: The default value of text-shadow is none, meaning no shadow is applied.
42. What does the inset keyword do in box-shadow?
o A) Makes the shadow appear outside the element
o B) Moves the shadow to the left
o C) Makes the shadow appear inside the element
o D) Increases the shadow size
o Answer: C
o Explanation: The inset keyword makes the shadow appear inside the element instead of outside.
43. How would you make a shadow that appears to be cast by a light source placed directly above the element?
o A) box-shadow: 0px -5px 10px rgba(0,0,0,0.5);
o B) box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
o C) box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
o D) box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
o Answer: A
o Explanation: A shadow cast by a light source above the element can be achieved with a negative vertical offset (-5px).
44. Which of the following CSS properties can be combined with box-shadow for a more interactive effect?
o A) background-color
o B) transition
o C) display
o D) overflow
o Answer: B
o Explanation: The transition property can be used to animate the box-shadow for a more dynamic effect.
45. What effect does increasing the blur radius in text-shadow have?
o A) It makes the shadow sharper
o B) It makes the shadow softer and larger
o C) It moves the shadow
o D) It changes the shadow color
o Answer: B
o Explanation: Increasing the blur radius causes the shadow to appear softer and larger.
46. How can a shadow effect be used in CSS for accessibility purposes?
o A) Shadows are not useful for accessibility
o B) Shadows can be used to improve contrast and focus
o C) Shadows should only be used in visual design
o D) Shadows can be used to hide content
o Answer: B
o Explanation: Shadows can be used for improving contrast, focusing elements, and drawing attention to important areas for accessibility.
47. Which property would you use to make the shadow move on hover in CSS?
o A) transition
o B) box-shadow: hover;
o C) hover-shadow
o D) motion-shadow
o Answer: A
o Explanation: The transition property allows for smooth animation of shadow movement on hover.
48. What does the box-shadow property affect in CSS?
o A) The shadow around the element's text only
o B) The shadow of the element's border or content area
o C) The content inside the element
o D) The background of the element
o Answer: B
o Explanation: The box-shadow property affects the shadow around the element's border or content area.
49. How can you create a "soft" shadow in CSS?
o A) Use a small blur radius
o B) Use a large blur radius
o C) Use negative offset values
o D) Use inset with high opacity
o Answer: B
o Explanation: A large blur radius creates a soft, diffused shadow.
50. What is the effect of the spread radius in box-shadow?
o A) It changes the shadow's direction
o B) It affects the shadow's size, making it larger or smaller
o C) It controls the shadow color
o D) It sharpens the shadow
o Answer: B
o Explanation: The spread radius controls the shadow's size by either expanding or shrinking it.
No comments:
Post a Comment