feat: simplified example and make the comparison more prominent

[fuchunhui]

Description

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/blend-mode

(comment last updated: 2024-12-13 10:55:10)

[chrisdavidmills]

Hi there @fuchunhui, and thank you for your contribution to MDN.

So, while I like the idea of having the examples combined into one so you can see them side-by-side for comparison purposes, I do have some problems with your change that I think need to be solved before we can accept this:

1. I think having two separate squares of the same size, with only a portion of the squares overlapping, is helpful to see the effect of the blend is. I think you should do this in your example, like it was in the original examples.
2. The text labels you have given each example are not readable at all. The paragraphs need a contrasting background and foreground color, and maybe a little bit of padding.
3. The examples are too close together — it is currently hard to see the differences between the examples and it hurts my eyes to look at a big wall of stripes.
4. Both the comparison examples on the page use background-blend-mode. Maybe you could change yours to use mix-blend-mode instead?

[fuchunhui]

Thanks for your feedback. I will solve these problems later.

[fuchunhui]

Before	After

I have re-uploaded the image resources and reduced their size to more conveniently display more examples within the limited screen space. The main goal was to resolve issues with overlapping areas and increase the display spacing.

But for some reason, in the localhost environment, it's still using image dimensions of 300x300 pixels.

[fuchunhui]

Added an additional example, using mix-blend-mode. and fix the style issue in the previous example.

[chrisdavidmills]

Hi @fuchunhui, and thanks for your work on this.

I pulled your branch locally and played around with it to see if I could figure out what is going on. I noticed that the images are saved with some whitespace in them. I edited them to remove the whitespace and just contain the 100px squares, and that made the examples behave less strangely.

I also tried giving the HTML on the "normal" example a very specific class to select, in case it was pulling in styles from somewhere else:

<div class="bmexample"></div>

I also tried setting some CSS styles to try to make sure the background images were not being repeated and were being constrained to their intrinsic size, just in case:

.bmexample {
  width: 200px;
  height: 200px;
  background-image: url("br.png"), url("tr.png");
  background-position: 25px 25px, 75px 75px;
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-blend-mode: normal;
  background-color: #dde;
}

But MDN is definitely doing something weird to the styling on this page. When I run the above code in a static HTML file through a basic HTTP server, it looks like this:

But when I run exactly the same code inside an MDN live sample on this page (on my local environment), it looks like this:

I will flag this to the developer team to see if they have got any idea what is going on. @fiji-flo @caugner, any thoughts? I think we should pause work on this demo until we've investigated this.