This set of Tough CSS Questions and Answers focuses on “Shadowy Styles, Multiple Backgrounds, CSS Pop-Ups & Menus”.
1. Which of the following is set for horizontal offset of the shadow?
a) h-offset
b) v-offset
c) none
d) blur
View Answer
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.
2. Which of the following is used for spread radius?
a) blur
b) spread
c) color
d) v-offset
View Answer
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.
3. What changes the shadow from an outer shadow?
a) inset
b) initial
c) inherit
d) spread
View Answer
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.
4. What scales the background image as large as possible?
a) contain
b) cover
c) size
d) resize
View Answer
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.
5. Which property specifies where the background image is positioned?
a) background-size
b) background-origin
c) background-image
d) background-clip
View Answer
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.
6. Which property specifies the painting area of the background?
a) background-clip
b) background-image
c) background-size
d) background-origin
View Answer
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.
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
View Answer
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.
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
View Answer
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.
9. Which of the following will display a speech bubble pop-up?
a) pop-up question form
b) cartoon pop-up
c) modal animation physics
d) overlay pop-up
View Answer
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.
10. Which of the following will give a minimalist entrance effect on hover?
a) “flappy” buttons
b) material design
c) linear pop-up
d) SVG & jQuery pop-up animation
View Answer
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.
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
View Answer
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.
12. Which of the following name should be added to mark a link as disabled?
a) responsive horizontal-to-vertical menu
b) pure-menu-disabled
c) pure-menu-selected
d) responsive vertical menu
View Answer
Explanation: To mark a link as disabled we add an <a> element with pure-menu-disabled class name, responsive vertical menu collapses behind a hamburger, responsive horizontal-to-vertical-menu, slides out of view.
Sanfoundry Global Education & Learning Series – CSS.
To practice tough questions and answers on all areas of CSS, here is complete set of 1000+ Multiple Choice Questions and Answers.
If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]
- Check Computer Science Books
- Practice Computer Science MCQs
- Apply for Computer Science Internship
- Practice HTML MCQ
- Check CSS Books
