Originally posted on my blog
I'm a big fan of CSS, it's the best part of front-end development in my opinion. It's the bit that really elevates a page from being a document to something much more.
Admittedly I haven't got through as many examples as I would have liked but it's time to showcase a few.
Something I put together as a concept for work, you can adjust the number of images and the orientation of the images in the grid (although it only takes the first one into account). P stands for portrait and L for landscape.
Playing with a few ideas, I wanted the HTML markup to represent the figures in the chart and the CSS to be used to render it. Really pleased with how it turned out.
I've adopted repeating patterns to fill white spice on one of my projects and achieved it with pseudo-elements and CSS, but had to settle for small circles as I couldn't quite get my head around how to build squares. Since then, I've figured it out, but wanted to try a different pattern. I went for three variations of bubbles. One with a shadow to the bottom right, one with a shadow to the top left and the third was to make them look like hollow circles (or bubbles).
If you're interested in seeing what else I've experimented with or what I come up with in the future, take a look at my CodePen profile.