Animations, Effects, Filters, Functions

Question 1

How to apply shadow to an alpha mask of an image? Add a shadow to a cutout image. What are the arguments.

Answer 1

Same args as text-shadow (has no spread value and no inset keyword like box-shadow). That is:
- Horizontal offset: positive values move the shadow right, and negative values left.
- Vertical offset: positive - up, negative - down.
- The blur radius (optional): a higher value means the shadow is dispersed more widely.
- Color (optional)

```css
figure img {
filter: drop-shadow(0px 0px 10px hotpink)
}
~~~

Question 2

How to apply filter to an element (e.g. div) and how to apply filter only to background (e.g. div background image)

Answer 2

filter: blur(0.2em);    /* Element */
backdrop-filter: blur(0.2em); /* Background */

Question 2

What filter functions you remember (give at least 5)

Answer 2

filter: blur(0.2em); /* gaussian blur */
filter: brightness(80%);
filter: contrast(160%);
filter: grayscale(80%);
filter: invert(1); /* invert colors between 0 and 1 */
filter: opacity(0.3);
filter: saturate(155%);
filter: sepia(70%);

/* Shifts the hue of all the element's colors, changing the part of the color wheel it references. */
filter: hue-rotate(120deg);

 /* Apply SVG filter under url */
filter: url(#pink-filter);

Question 3

Calculate min and max between 20vw and 30rem

Answer 3

min(20vw, 30rem);
max(20vh, 20rem);

Question 4

Use font size 1rem + 3vw, but keep it at least 2rem but at most 3rem

Answer 4

`
font-size: clamp(
2rem,
1rem + 3vw,
3rem
);
`

Question 5

Rotate element 10 degrees, scale it to 1.5 of its size, move 50px right and 20 px up

Answer 5

.my-element {
    transform: rotate(10deg);
    transform: scale(1.5);
    transform: translate(50px, 20px); 
}

Question 6

Define animation that will transform element over 10s period (will play on loading)

Answer 6

@keyframes my-animation {
  /* 0% */
  from {
    transform: translateY(50px);
  }
  /* 100% */
  to {
    transform: translateY(0px);
  }
}

.my-element {
  animation: my-animation 10s
}

Question 7

Define animation that will transform element over 10s period with 3 different stages (at start, middle, and end)

Answer 7

@keyframes my-animation {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
   transform: translateY(0px);
  }
}

.my-element {
  animation: my-animation 10s
}

Question 8

Define animation on an element over 10s period with ease effect (fast at first, slow at the ends)

Answer 8

animation: my-animation 10s ease

Question 9

Change div background color when hovering over it with a mouse. The change should take 2s and have ease effect (fast at first, slow at the ends).

Provide all properties and a shortcut.

Answer 9

.my-element {
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 0s;

  transition: color 300ms ease 0s;
}