Pseudo-Randomly Adding Illustrations with CSS

Between each post of Eric Meyers blog theres this rather lovely illustration that can randomly be one of these five options:

Eric made each illustration into a separate background image then switches out that image with the nth-of-type CSS property, like this:

.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);}

This seems like a good time to plug our very own little :nth Tester tool. It definitely helps … Read article “Pseudo-Randomly Adding Illustrations with CSS”

The post Pseudo-Randomly Adding Illustrations with CSS appeared first on CSS-Tricks.