MCQs Of Class 27: CSS Filters
1. What does the blur() filter in CSS do?
a) Sharpens the image
b) Applies a blur effect to the image
c) Converts the image to grayscale
d) Increases the brightness of the image
Answer: b) Applies a blur effect to the image
Explanation: The blur() filter is used to create a blurred (out of focus) effect on an element. It takes a value representing the blur radius in pixels.
2. What is the purpose of the brightness() filter in CSS?
a) To decrease the brightness of the image
b) To make the image sharper
c) To increase the brightness of the image
d) To adjust the contrast of the image
Answer: c) To increase the brightness of the image
Explanation: The brightness() filter adjusts the brightness of an element. A value greater than 1 increases brightness, while values less than 1 decrease it.
3. What does the contrast() filter in CSS do?
a) Changes the saturation of the image
b) Adjusts the contrast of the image
c) Rotates the hues of the image
d) Converts the image to black and white
Answer: b) Adjusts the contrast of the image
Explanation: The contrast() filter modifies the contrast of an element. Higher values increase the difference between light and dark areas.
4. Which filter converts an image to black and white?
a) grayscale()
b) brightness()
c) invert()
d) sepia()
Answer: a) grayscale()
Explanation: The grayscale() filter makes the image appear black and white by removing the color information.
5. What is the effect of the sepia() filter in CSS?
a) It inverts the colors of an image
b) It gives the image a warm, brown tone
c) It increases the image’s brightness
d) It applies a blur effect to the image
Answer: b) It gives the image a warm, brown tone
Explanation: The sepia() filter applies a warm, brownish tone to the image, making it look like an old photograph.
6. What does the invert() filter do in CSS?
a) Converts the image to grayscale
b) Inverts the colors of the image
c) Increases the contrast of the image
d) Rotates the hues of the image
Answer: b) Inverts the colors of the image
Explanation: The invert() filter inverts the colors of an image, creating a photographic negative effect.
7. Which filter is used to rotate the colors in an image?
a) invert()
b) hue-rotate()
c) contrast()
d) saturate()
Answer: b) hue-rotate()
Explanation: The hue-rotate() filter rotates the hues of the image, changing its colors by a specified degree.
8. How do you make an image 50% grayscale using CSS?
a) filter: grayscale(0.5);
b) filter: grayscale(1);
c) filter: grayscale(50%);
d) filter: grayscale(0);
Answer: a) filter: grayscale(0.5);
Explanation: The grayscale() filter accepts a value between 0 and 1, where 0 is no grayscale and 1 is full grayscale. A value of 0.5 applies 50% grayscale.
9. How can you add a hover effect to change the filter applied to an image?
a) Using hover selector with filter property
b) Using onmouseover event handler
c) Using hover selector with transition property
d) Both a and c
Answer: d) Both a and c
Explanation: To change the filter on hover, you can use the :hover pseudo-class combined with the filter property, along with transition for smooth effects.
10. Which value does the saturate() filter take?
a) Percentage
b) Pixels
c) Time duration
d) Degrees
Answer: a) Percentage
Explanation: The saturate() filter is used to adjust the saturation of an image. It accepts a percentage value, where 100% is the original saturation.
11. What is the default value of the blur() filter?
a) 0px
b) 5px
c) 1px
d) 10px
Answer: a) 0px
Explanation: The blur() filter defaults to a value of 0px, meaning there is no blur effect unless a value greater than 0px is specified.
12. Which of the following filters can be combined with other filters in CSS?
a) blur()
b) grayscale()
c) brightness()
d) All of the above
Answer: d) All of the above
Explanation: Filters like blur(), grayscale(), and brightness() can be combined to apply multiple effects on an element.
13. What is the effect of using filter: saturate(0); on an image?
a) The image becomes completely grayscale
b) The image becomes inverted
c) The image becomes transparent
d) The image remains unchanged
Answer: a) The image becomes completely grayscale
Explanation: The saturate(0) filter removes all color saturation, making the image completely grayscale.
14. What is the effect of the opacity() filter?
a) It makes the image fully transparent
b) It adjusts the opacity of the image
c) It applies a sepia tone to the image
d) It sharpens the image
Answer: b) It adjusts the opacity of the image
Explanation: The opacity() filter changes the transparency of an element. A value of 1 means fully opaque, while 0 is fully transparent.
15. Which filter gives a "negative" or "inverted colors" effect to the image?
a) invert()
b) contrast()
c) brightness()
d) hue-rotate()
Answer: a) invert()
Explanation: The invert() filter inverts the colors of an element, creating a negative effect.
16. How do you apply both brightness and contrast filters to an image?
a) filter: brightness(1.2) contrast(1.5);
b) filter: brightness(1.5) contrast(1.2);
c) filter: contrast(1.5) brightness(1.2);
d) All of the above
Answer: d) All of the above
Explanation: Filters can be applied in any order, and multiple filters can be combined, as shown in all the above options.
17. Which filter will give an image a more "vintage" or "old photograph" look?
a) sepia()
b) grayscale()
c) brightness()
d) invert()
Answer: a) sepia()
Explanation: The sepia() filter gives the image a brownish tint, simulating the look of an old photograph.
18. What happens if you apply a negative value in the brightness() filter?
a) It darkens the image
b) It inverts the image
c) It adds a sepia tone
d) It makes the image blurry
Answer: a) It darkens the image
Explanation: The brightness() filter only accepts positive values. If negative values are applied (incorrectly), the image would typically get darker, though this is not the intended use.
19. What is the range of values that the grayscale() filter can take?
a) 0 to 1
b) 0% to 100%
c) 1 to 10
d) 0 to 100
Answer: a) 0 to 1
Explanation: The grayscale() filter takes values between 0 (no grayscale) and 1 (full grayscale).
20. How would you apply a blur effect to an image with 10px radius?
a) filter: blur(10px);
b) filter: blur(10);
c) filter: blur(100%);
d) filter: blur(0.1);
Answer: a) filter: blur(10px);
Explanation: To apply a blur effect, you need to specify a radius in pixels, like blur(10px).
21. What is the effect of filter: saturate(1)?
a) No effect
b) The image becomes black and white
c) The image becomes fully saturated
d) The image becomes transparent
Answer: a) No effect
Explanation: The saturate(1) filter is the default value, meaning it applies no change to the saturation of the image.
22. How can you combine multiple filters in a single CSS property?
a) Separate the filters by commas
b) Use multiple filter properties
c) Use the + operator
d) Use the & operator
Answer: a) Separate the filters by commas
Explanation: Multiple filters are applied by separating them with commas in the filter property, like filter: blur(5px) brightness(1.2);.
23. Which of the following filter combinations is valid?
a) filter: blur(5px) brightness(1.2);
b) filter: brightness(1.2, blur(5px));
c) filter: contrast(1.5) grayscale(0.5);
d) Both a and c
Answer: d) Both a and c
Explanation: Both options are valid combinations of filters. The order of filters can vary.
24. What filter would you use to create a high-contrast image?
a) contrast()
b) brightness()
c) invert()
d) hue-rotate()
Answer: a) contrast()
Explanation: The contrast() filter increases the contrast of the image, making the light areas lighter and dark areas darker.
25. Which CSS filter is used to adjust the transparency of an element?
a) opacity()
b) blur()
c) brightness()
d) saturate()
Answer: a) opacity()
Explanation: The opacity() filter is used to adjust the transparency of an element, where 1 is fully opaque and 0 is fully transparent.
I will continue to provide the rest of the questions in the next section. Please let me know if you want me to continue!
4o mini
You said:
yes
ChatGPT said:
ChatGPT
Continuing from the previous section:
26. What does the grayscale() filter do to an image?
a) Applies a black and white effect
b) Increases the brightness
c) Changes the hue
d) Reduces the opacity
Answer: a) Applies a black and white effect
Explanation: The grayscale() filter removes color from an image, leaving only shades of gray.
27. What is the range of values for the brightness() filter?
a) 0 to 1
b) -100 to 100
c) 0% to 200%
d) 1 to 10
Answer: a) 0 to 1
Explanation: The brightness() filter takes values between 0 (completely dark) and 1 (no change).
28. How do you apply a blur() effect with a 10px radius on hover?
a) filter: blur(10px);
b) filter: blur(10px) onhover;
c) element:hover { filter: blur(10px); }
d) hover: blur(10px);
Answer: c) element:hover { filter: blur(10px); }
Explanation: The :hover pseudo-class is used to apply the blur() filter when the user hovers over an element.
29. What happens if you set the contrast() filter value to 0?
a) The image turns black
b) The image becomes completely grayscale
c) The image will have no contrast
d) The image becomes fully saturated
Answer: c) The image will have no contrast
Explanation: A contrast() value of 0 means no contrast at all, resulting in a washed-out image.
30. How would you make an image completely transparent using CSS?
a) filter: opacity(0);
b) filter: transparency(100%);
c) filter: blur(100%);
d) filter: grayscale(100%);
Answer: a) filter: opacity(0);
Explanation: The opacity() filter with a value of 0 will make the image fully transparent.
31. How do you apply a sepia() effect to an image?
a) filter: sepia(100%);
b) filter: sepia(1);
c) filter: sepia(50%);
d) All of the above
Answer: d) All of the above
Explanation: The sepia() filter can be applied using different value formats like percentage or decimal (e.g., 100%, 1, or 50%).
32. What does the hue-rotate() filter in CSS do?
a) Changes the hue of the image, shifting colors by a specified degree
b) Applies a sepia tone
c) Adjusts the opacity
d) Converts the image to grayscale
Answer: a) Changes the hue of the image, shifting colors by a specified degree
Explanation: The hue-rotate() filter rotates the color wheel of an image by a given degree.
33. What filter would you use to make an image appear "vibrant"?
a) saturate()
b) brightness()
c) contrast()
d) grayscale()
Answer: a) saturate()
Explanation: The saturate() filter increases the intensity of the colors in the image, making it appear more vibrant.
34. Which filter does not affect the color of an image?
a) grayscale()
b) contrast()
c) blur()
d) saturate()
Answer: c) blur()
Explanation: The blur() filter affects the sharpness of the image, not its color or saturation.
35. What happens when the saturate() filter is set to 0?
a) The image becomes fully transparent
b) The image becomes fully black and white
c) The image becomes more vibrant
d) The image becomes blurry
Answer: b) The image becomes fully black and white
Explanation: A saturate() value of 0 removes all saturation, turning the image grayscale.
36. How can you apply a sepia() effect with a 50% intensity?
a) filter: sepia(0.5);
b) filter: sepia(50%);
c) filter: sepia(1);
d) filter: sepia(100%);
Answer: a) filter: sepia(0.5);
Explanation: A value of 0.5 in the sepia() filter applies a 50% sepia effect.
37. Which filter should you use to add a cool-toned effect to an image?
a) invert()
b) saturate()
c) hue-rotate()
d) sepia()
Answer: c) hue-rotate()
Explanation: The hue-rotate() filter can be used to adjust the hues of an image, shifting its colors to create a cool or warm tone.
38. How do you prevent the filter effects from affecting the text within an image element?
a) filter: none;
b) filter: inherit;
c) filter: unset;
d) filter: text;
Answer: a) filter: none;
Explanation: If you want to remove any filter effect from the image, you can set filter: none; on the element.
39. How do you apply a filter effect gradually over time?
a) Use the transition property
b) Use the animation property
c) Use the filter property
d) Both a and b
Answer: d) Both a and b
Explanation: You can apply filter effects gradually by using the transition or animation property, depending on whether you want a one-time or continuous effect.
40. Which of these filters adjusts the contrast between light and dark areas?
a) contrast()
b) blur()
c) saturate()
d) grayscale()
Answer: a) contrast()
Explanation: The contrast() filter adjusts the contrast, making the light areas lighter and dark areas darker.
41. Which of the following is true about the filter property in CSS?
a) It can be used to apply multiple effects on an element.
b) It only supports one effect at a time.
c) It can only be applied to images.
d) It has no effect on text elements.
Answer: a) It can be used to apply multiple effects on an element.
Explanation: The filter property supports multiple effects (like blur(), brightness(), contrast(), etc.) applied together on an element.
42. Which of these filters can be applied to the background property in CSS?
a) filter: blur();
b) filter: sepia();
c) filter: hue-rotate();
d) All of the above
Answer: d) All of the above
Explanation: Filters like blur(), sepia(), and hue-rotate() can be applied to any element, including the background.
43. What is the effect of applying a hue-rotate(180deg) filter on an image?
a) The image will be rotated by 180 degrees
b) The colors of the image will be rotated by 180 degrees
c) The image will be inverted
d) The image will turn black and white
Answer: b) The colors of the image will be rotated by 180 degrees
Explanation: The hue-rotate(180deg) filter rotates the colors on the color wheel by 180 degrees, changing the image’s colors.
44. What filter would you use to apply a blurry effect to an image?
a) filter: blur(5px);
b) filter: contrast(2);
c) filter: grayscale(1);
d) filter: brightness(1.5);
Answer: a) filter: blur(5px);
Explanation: The blur() filter is used to apply a blurry effect, and the number of pixels determines the intensity of the blur.
45. How do you combine grayscale and brightness filters?
a) filter: grayscale(0.5) brightness(1.2);
b) filter: brightness(1.2, grayscale(0.5));
c) filter: grayscale(0.5) + brightness(1.2);
d) filter: grayscale(0.5), brightness(1.2);
Answer: a) filter: grayscale(0.5) brightness(1.2);
Explanation: Filters can be combined in one filter property, separated by spaces, like grayscale(0.5) brightness(1.2).
46. What happens if you set saturate(0) on an image?
a) The image turns fully grayscale
b) The image becomes very vibrant
c) The image becomes transparent
d) The image becomes blurred
Answer: a) The image turns fully grayscale
Explanation: saturate(0) removes all saturation from the image, turning it grayscale.
47. What filter creates a "vintage" or "old photograph" effect?
a) sepia()
b) grayscale()
c) contrast()
d) invert()
Answer: a) sepia()
Explanation: The sepia() filter gives the image a warm, brownish tint, creating a vintage or old photograph effect.
48. Can the filter property be applied to non-image elements?
a) Yes
b) No
c) Only for text elements
d) Only for background images
Answer: a) Yes
Explanation: The filter property can be applied to any element, not just images, including text, backgrounds, and other HTML elements.
Let me know if you'd like more questions or need help with something else!
4o mini
You said:
rest
ChatGPT said:
ChatGPT
Certainly! Here's the continuation of the MCQs:
49. Which of these filters can make an image appear to be a negative (inverted) version of itself?
a) invert()
b) hue-rotate()
c) grayscale()
d) saturate()
Answer: a) invert()
Explanation: The invert() filter inverts all the colors in an image, making it appear like a negative.
50. Which property is used to apply multiple CSS filters at once?
a) filter
b) transform
c) effects
d) filter-effects
Answer: a) filter
Explanation: The filter property is used to apply multiple CSS filter effects at once, separated by spaces.
No comments:
Post a Comment