Mobile first card component using Flexbox and BEM

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 3 years ago

  "I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image?"

  That's an interesting solution! The image contrast is lower in the design, is the only slight difference I can see, and the use of a linear gradient from and to the same value looks confusing at first...

  Your solution works because gradients and images occupy the same background "space". As you suggest, background-color and background-image live in different layers so you could set:

  background-image: url('../path/to/image.jpg');
  background-color: var(--accent-color);
  

  The visual effect is the same, but IMO the code's a bit more explicit and readable.

  To reduce the contrast of the image mix-blend-mode with the exclusion or lighten values get you into the neighbourhood, although you might then need to tweak the color value for a closer visual match.

  Marked as helpful

  1

  ---

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hey @markup-mitchell! Thank you for that feedback, you're solution worked perfectly! I also applied the mix-blend-mode with exclusion and was inspired to tweak the hsl() values of the color. Thanks to you I now understand how to write more readable code to blend and mix images and backgrounds!

  0
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @gchristofferson 👋🏻

  I just have a quick tip to help you fix the accessibility issue.

  • <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issue. Don't forget to generate a new repot after you fix it.
  • Also a bonus tip 😃 add background-color: var(--main-background); in body, so it covers the whole screen for all screen sizes.

  I hope this was helpful 👨🏻‍💻 you did a pixel perfect job, keep it up. Cheers 👾

  Marked as helpful

  1

  ---

  

  Gregg Christofferson•295

  @gchristoffersonPosted about 3 years ago

  Hey @kens-visuals ,

  Thanks for both those awesome tips! Thanks to you I fixed the accessibility issue and applied the background color to the body. Its much better now! :-)

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Now it's absolutely perfect 😁 👌🏻

  You're welcome @gchristofferson

  Marked as helpful

  1
• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Your background needs to be full size of the body element

  3
• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 3 years ago

  👍 you're welcome 🙂

  0