Pseudo-Randomly Adding Illustrations with CSS

Five different illustrations are cleverly used between Eric Meyer's blog posts, which appear to appear randomly.

Eric sets each illustration as a separate background image and switches the image using nth-of-type CSS attribute, for example:

 .entry:nth-of-type(2n 1)::before {
   background-image: url(image-1.png);
}

.entry:nth-of-type(3n 1)::before {
   background-image: url(image-2.png);
}

.entry:nth-of-type(4n 1)::before {
   background-image: url(image-3.png);
}

.entry:nth-of-type(5n 1)::before {
   background-image: url(image-4.png);
}

Here we recommend our own :nth testing tool, which can help understand expressions such as (2n 1) . You can enter any string and see how it affects the website.

Going back to Eric's blog post, as he mentioned, his technique is pseudo-random , and while the pictures on the page seem random, it is not actually the case. Anyway, this is a very clever technique! It effectively breaks the visual monotonicity that occurs when browsing websites for a long time.

The actual effect is as follows:

The effect is great!

Another way is to use random numbers in CSS. For example, we can set a variable in JavaScript and apply it using CSS custom properties. Alternatively, we can put all the pictures in a single Sprite image file and change background-position based on the random number.

In CSS, this is definitely a case of no wrong answers, just a different way to achieve the same excellent effect!

The above is the detailed content of Pseudo-Randomly Adding Illustrations with CSS. For more information, please follow other related articles on the PHP Chinese website!