Sunday, July 17, 2022
HomeWordPress Developmentcolor-mix perform - DEV Group

color-mix perform – DEV Group


I all the time like to delve into the brand new and great issues coming to the online, at the moment I am going to take a look at the color-mix perform which, on the time of writing, will not be in any steady browser however has arrived in firefox behind a flag.



What does color-mix do?

The color-mix perform means that you can combine colors (who’d have thought?) these colors may be named colors, hex colors or any kind of color actually. That is very thrilling as a result of it permits us so as to add some SCSS like performance resembling lighten, darken and even adjust-color‘s alpha.



Why are there color areas

Color areas are an entire different factor. A color house is a solution to mathematically outline a set of colors. Utilizing totally different color areas means that you can symbolize totally different colors. Naturally this implies mixing colors in several color areas creates totally different outcomes.

This can be a video from Surma, whereas at Google, that explores color areas in additional element than I can.



Sensible examples

I’ve thrown collectively a really fast instance of a few of the issues you are able to do. As I discussed earlier none of this code can run in a steady browser with out flags so I’ve uploaded a picture of the end result too.

The examples I’ve finished are,

  • tomato darkening by mixing with black,
  • teal lightening by mixing with white
  • purple changing into much less opaque by mixing with clear (technically a color it appears)
  • pink mixing to inexperienced

color-mix example



Fin

There we go, that is it for now. It is so cool to see little features like this coming to css making it extra highly effective, possibly someday we can’t want css pre processor’s in any respect, particularly with css nesting being talked about. Very thrilling.

Thanks a lot for studying. If you would like to attach with me exterior of Dev listed here are my twitter and linkedin come say hello 😊.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments