Submitted over 3 years ago

3-column preview card component

cube-css, accessibility

Dave Quah•650

@Milleus

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

I learnt that a nice way to get the button text colors to match different background colors is to set color: black; and mix-blend-mode: screen;.

About blend-mode from MDN website:

screen

The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Dave Quah's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord