Week 137 was posted by Charanjit Chana on 2020-06-08.
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.
Over the past year or so I've really pushed myself to see what I can achieve with just CSS, especially things that are usually left to JavaScript, and to built solutions that really could be used out in the wild.
Admittedly I haven't got through as many examples as I would have liked but it's time to showcase a few.
CSS only slideshow
The example I'm proudest of is this CSS only slideshow that uses absolutely no JavaScript. I don't think the HTML is any more verbose than it would be for a JavaScript version, but it is lacking highlighted pagination at the moment. I've been thinking that I could leverage a repeating box-shadow property to solve that but it's something I need to look into.
CSS image grid
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.
This example has JavaScript to allow the properties to change but it is a pure CSS grid that is doing the work.
CSS only tabs
The CSS slideshow was created a couple of months ago and while looking at how different libraries tackle tabs, I realised I could use the same concept for tabs too. This example has no JavaScript but really does tab between the content as you'd expect. Like the slideshow, highlighting the current tab is missing at the moment, but something that would be great to solve.
CSS only pie chart
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.
CSS bubble patterns
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).
More from me on CodePen
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.
Tags: codepen, css, development, html, codepen, css, development, html