This is the 6th day of my participation in the August More Text Challenge

Yyds Project Manager: I want six different aunts by tomorrow

I:? What?

Inner OS: What about the UI? Have you been playing mah-jong? Two minutes of UI, how does that break the front end? Although my aunt’s beauty is beautiful, it can’t be so devastating…

No way, the project manager a word, the front ten root send 🤷♀️

How is not the same, that can only use “colored eyes” to see, then give her a filter.

Css3 filter adds a filter to the image.Warm colors, gentle aunt next door comes out

/* Adjust image browns and saturates */. Img1 {-webkit-filter:sepia(25%) saturate(200%); filter:sepia(25%) saturate(200%); }Copy the code

To a gray scale, nostalgia aunt out

/* Adjust image contrast with brown */. Img2 {-webkit-filter:contrast(110%); filter:contrast(110%) sepia(45%); }Copy the code

And a bright, energetic aunt

/* To change the brightness of pictures */. Img3 {-webkit-filter: Brightness (125%); filter:brightness(125%); }Copy the code

Goddess, out of reach, and misty beauty

Img4 {-webkit-filter:blur(2px); // Blur (optional) The larger the value, the more blurred the filter: blur(2px); }Copy the code

After all, aunts are only human, and there’s always something to be said for them

Img5 {-webkit-filter:drop-shadow(10px 6px 11px #E28C50) (60%); filter:drop-shadow(10px 6px 11px #E28C50) opacity(60%); }Copy the code

drop-shadow(h-shadow v-shadow blur spread color)

  • H-shadow V-shadow (mandatory) Set horizontal and vertical shadow distance
  • Blur (Optional) The larger the value is, the more blurred it is
  • Spread (optional) A positive value causes the shadow to expand and grow, and a negative value causes the shadow to shrink.
  • Color (optional)

I guess I’ll forget what I did before, and then I’ll do a big set

Finally, I wish you a happy Tanabata, YYDS… 😑