Frontend Web Development Bootcamp - Build a Twitter Clone - Shadows

This video tutorial covers the use of shadows in CSS to create modern effects on websites. It explains how to apply text shadows and box shadows, detailing the properties involved, such as position, blur, and color. The tutorial also demonstrates how to use box shadows with hover effects to enhance interactivity. By the end, viewers will understand how to use these CSS properties to make web elements visually appealing.

What is the primary purpose of the text-shadow property in CSS?

• To align text to the center

• To add a shadow effect to text

• To change the font style

• To change the text color

Which value in the text-shadow property controls the blur effect?

• The first value

• The color value

• The second value

• The third value

How can you move a text shadow to the left?

• Use a positive horizontal value

• Use a negative vertical value

• Use a negative horizontal value

• Use a positive vertical value

What is the main difference between text-shadow and box-shadow?

• Text-shadow is for colors, box-shadow is for fonts

• Text-shadow is for text, box-shadow is for boxes

• Text-shadow is for images, box-shadow is for text

• Text-shadow is for boxes, box-shadow is for text

How do you ensure an image inside a card takes the full width of its parent element?

• Set the image width to 50%

• Set the card width to 50%

• Set the image width to 100%

• Set the card width to 100%

What effect does the hover state have on a box-shadow?

• It changes the text color

• It increases the shadow size

• It decreases the shadow size

• It changes the background color

Which CSS property can enhance the hover effect of a box-shadow?

• Transition

• Margin

• Padding

• Font-size