Sololearn CSS course CSS Filters answers

Here are all the questions and answers that I hope will help you learn CSS course.

Other course answers

Sololearn CSS course The Basics answers
Sololearn CSS course Working with Text answers
Sololearn CSS course Properties answers
Sololearn CSS course Positioning and Layout answers
Sololearn CSS course CSS3 Basics answers
Sololearn CSS course Gradients & Backgrounds answers
Sololearn CSS course Transitions & Transforms answers

72.1 Lesson

CSS Filters

Question:

CSS Filters
Which of the following is not a filter function?

Answer:

inverse

Question:

The drop-shadow Function
Fill in the blanks to create a red shadow.

Answer:

<style>
  .withshadow {
    filter: drop-shadow (5px 9px 2px red);
  }
</style>

73.1 Lesson

Filter Functions

Question:

The grayscale Function
Fill in the blanks to apply the grayscale function.

Answer:

<style>
  .filtered {
    filter: grayscale(50%);
  }
</style>

Question:

The sepia Function
Fill in the blanks to create a valid sepia function.

Answer:

<style>
  .filtered {
    filter: sepia(200%);
  }
</style>

Question:

The saturate Function
How many parameters does the saturate function have?

Answer:

1

Question:

The hue-rotate Function
Rotating the hue by 120deg will make the red color in an image:

Answer:

green

Question:

The invert Function
Fill in the blanks to completely invert the image.

Answer:

<style>
  .fully_inverted {
    filter: invert(100%);
  }
</style>

74.1 Lesson

Opacity & Brightness

Question:

The opacity Function
Fill in the blanks to make an image semi-transparent.

Answer:

<style>
  #my_image .ghost {
    filter: opacity(50%);
    width: 100px;
    height: 100px;
  }
</style>

Question:

The brightness Function
Fill in the blanks to make an image brighter and circled.

Answer:

<style>
  .very_bright {
    filter: brightness(150%);
    border-radius: 50%;
  }
</style>

Question:

The contrast Function
Fill in the blanks to make an image completely gray.

Answer:

<style>
  #my_image .gray_effect {
    filter: contrast(0%);
    width: 150px;
  }
</style>

Question:

The blur Function
Fill in the blanks to apply a blur effect.

Answer:

<style>
  #my_image .glitchy {
    border: solid 1px black;
    filter: blur(5px);
  }
</style>

75.1 Lesson

Using Multiple CSS Filters

Question:

Using Multiple CSS Filters
Fill in the blanks to make an image circled and blurred with a gray shadow.

Answer:

<style>
  #avatar .deactivated {
    filter: saturate(30%) drop-shadow(5px 9px 2px gray) blur(1px);
    border-radius: 50%;
  }
</style>

76.1 Lesson

Module 8 Quiz

Question:

Which of the following is a filter function?

Answer:

invert

Question:

Fill in the blanks to rotate the hue by 80 degrees.

Answer:

<style>
  .filtered {
    filter: hue-rotate(80deg);
  }
</style>

Question:

Fill in the blanks to change the saturation of an image by 55% and partially invert it.

Answer:

<style>
  .modified {
    filter: saturate(55%) invert(70%);
  }
</style>

Question:

Fill in the blanks to create an image which is completely grayscale and has a grey shadow effect.

Answer:

<style>
  .filtered {
    filter: grayscale(100%)
    drop-shadow(5px 9px 2px gray);
  }
</style>

Question:

Fill in the blanks to adjust the brightness of an image to 110% and apply a blur effect to it.

Answer:

<style>
  .filtered {
    filter: blur(5px) brightness(110%);
  }
</style>

Question:

Fill in the blanks to make the image circled and blurred with 30% sepia applied.

Answer:

<style>
  img {
    border-radius: 50%;
    filter: sepia(30%) drop-shadow(5px 9px 2px red) blur(1px);
    width: 100px;
    height: 100px;
  }
</style>