CSS Questions & Answers – Shadowy Styles, Multiple Backgrounds, CSS Pop-Ups &…

CSS Multiple Choice Questions & Answers (MCQs) focuses on “Shadowy Styles, Multiple Backgrounds, CSS Pop-Ups & Menus”.

Q 1. Which of the following is set for horizontal offset of the shadow?
A. h-offset
B. v-offset
C. blur
D. none

Show Answer

Answer:-A. h-offset

Explanation

h-offset is the required value, it is for the horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.

Q 2. Which of the following is used for spread radius?
A. blur
B. spread
C. color
D. v-offset

Show Answer

Answer:-B. spread

Explanation

blur is an optional value, it sets the spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. For blur radius we set the value blur, the higher the number, the more blurred the shadow will be spread.

Q 3. What changes the shadow from an outer shadow?
A. inset
B. initial
C. inherit
D. spread

Show Answer

Answer:-A. inset

Explanation

inset is an optional value, it changes the shadow from an outer shadow (outset) to an inner shadow, initial sets this property to its default value, inherit inherits this property from its parent element.

Q 4. What scales the background image as large as possible?
A. resize
B. cover
C. size
D. contain

Show Answer

Answer:-D. contain

Explanation

The contain keyword scales the background image to be as large as possible but both its width and its height must fit inside the content area. As such depending on the proportions of the background image and background positioning area, there may be some areas of background which are not covered by the background image.

Q 5. Which property specifies where the background image is positioned?
A. background-size
B. background-origin
C. background-image
D. background-clip

Show Answer

Answer:-B. background-origin

Explanation

The CSS background-origin property specifies where the background image is positioned. This property takes three different values namely border-box, padding-box, content-box. In content-box the background images start from the upper left corner of the content.

Q 6. Which property specifies the painting area of the background?
A. background-image
B. background-clip
C. background-size
D. background-origin

Show Answer

Answer:-B. background-clip

Explanation

The CSS background-clip property specifies the painting area of the background, the property takes three different values, border-box-, padding-box, content-box. In content-box the background is painted within the content box.

Q 7. Which of the following will show a pop-up window that breaks into pieces once clicked?
A. click and break it
B. 3D movement effect
C. blurred background
D. left bottom corner

Show Answer

Answer:-A. click and break it

Explanation

A pop-up window that breaks into pieces once clicked is called click and break it, in 3D movement effect a 3D message made with CSS3 and jQuery that follows user’s mouse movements will be shown.

Q 8. Which of the following comes with a smooth full screen overlay effect?
A. Overlay pop-up
B. Conformation pop-up
C. Welcome pop-up
D. Cartoon pop-up

Show Answer

Answer:-A. Overlay pop-up

Explanation

Overlay pop-up comes with a smooth full screen overlay effect, conformation pop-up comes with a full screen overlay effect and nice transition animation, welcome pop-up is a pop-up with nice animation effect.

Q 9. Which of the following will display a speech bubble pop-up?
A. pop-up question form
B. overlay pop-up
C. modal animation physics
D. cartoon pop-up

Show Answer

Answer:-D. cartoon pop-up

Explanation

cartoon pop-up shows a speech bubble pop-up that fades in once hovered in the circle, a pop-up question form that smoothly appears once clicked a button, in modal animation physics a transition animation inspired by the menu pop-ups in Super Mario 3D.

Q 10. Which of the following will give a minimalist entrance effect on hover?
A. linear pop-up
B. material design
C. “flappy” buttons
D. SVG & jQuery pop-up animation

Show Answer

Answer:-A. linear pop-up

Explanation

A minimalist yet charming entrance effect on hover is shown by linear pop-up, a distinguishable pop-up with beautiful entrance effect and “flappy” buttons are shown by “flappy” buttons, a material design comes with a fade-in animation in material design style.

Q 11. What should be added to create a horizontal menu?
A. pure-menu-horizontal
B. pure-menu-selected
C. pure-menu-has-children
D. pure-menu-scrollable

Show Answer

Answer:-A. pure-menu-horizontal

Explanation

For creating a horizontal menu, we add pure-menu-horizontal class name, we can mark a selected list element by adding pure-menu-selected class to the list element, to create a scrollable horizontal menu, we add pure-menu-scrollable class name.

Q 12. Which of the following name should be added to mark a link as disabled?
A. responsive horizontal-to-vertical menu
B. pure-menu-selected
C. pure-menu-disabled
D. responsive vertical menu

Show Answer

Answer:-C. pure-menu-disabled

Explanation

To mark a link as disabled we add an element with pure-menu-disabled class name, responsive vertical menu collapses behind a hamburger, responsive horizontal-to-vertical-menu, slides out of view.