CSS MCQs – CSS3 Features and Animations

11.) Which CSS3 feature is used to apply gradients to elements?

A) gradient-color
B) linear-gradient
C) gradient-style
D) color-gradient

Answer: Option B

Explanation: The linear-gradient function in CSS3 is used to create linear gradients, allowing designers to apply smooth transitions of color across elements.

12.) Which CSS3 property is used to apply transitions to elements?

A) transition-effect
B) animate
C) transition
D) transform

Answer: Option C

Explanation: The transition property in CSS3 is used to apply smooth transitions to CSS properties, such as color, size, and position, when their values change.

13.) Which CSS3 feature is used to create text effects like shadows and outlines?

A) text-shadow
B) text-effect
C) text-outline
D) text-style

Answer: Option A

Explanation: The text-shadow property in CSS3 is used to create text effects like shadows and outlines, enhancing the appearance of text on web pages.

14.) Which CSS3 property is used to create animations?

A) animate
B) transition
C) keyframes
D) transform

Answer: Option C

Explanation: The @keyframes rule in CSS3 is used to define animations by specifying keyframes, which describe the styles at different points during the animation’s duration.

15.) Which CSS3 feature is used to create 2D and 3D transformations?

A) translate
B) rotate
C) transform
D) transition

Answer: Option C

Explanation: The transform property in CSS3 is used to apply 2D and 3D transformations to elements, such as rotation, scaling, skewing, and translation.

16.) Which CSS3 property is used to control the order of elements when they overlap?

A) z-index
B) position
C) order
D) stack-order

Answer: Option A

Explanation: The z-index property in CSS3 is used to control the order of elements along the z-axis (depth), determining which elements appear in front of or behind others when they overlap.

17.) Which CSS3 feature is used to create responsive and flexible layouts?

A) grid
B) flexbox
C) layout
D) flow

Answer: Option B

Explanation: The Flexbox layout model in CSS3 is used to create responsive and flexible layouts, allowing designers to align and distribute elements dynamically within a container.

18.) Which CSS3 property is used to create shadow effects around an element?

A) box-shadow
B) element-shadow
C) shadow-effect
D) element-effect

Answer: Option A

Explanation: The box-shadow property in CSS3 is used to create shadow effects around an element.

19.) Which CSS3 property is used to specify the opacity of an element?

A) alpha
B) transparent
C) visibility
D) opacity

Answer: Option D

Explanation: The opacity property in CSS3 is used to specify the transparency level of an element.

20.) Which CSS3 feature is used to apply different styles to an element based on its state, such as hover or focus?

A) Pseudo-classes
B) Transitions
C) Animations
D) Flexbox

Answer: Option A

Explanation: Pseudo-classes in CSS3 are used to define special states of an element, such as :hover, :focus, or :active, allowing different styles to be applied based on these states.

Leave a Reply

Your email address will not be published. Required fields are marked *