1 Thing A Week 1 Thing
A Week

5 CodePens that show what can be achieved with just CSS Pushing what CSS can do without introducing any JavaScript

Week 137.0 — 8th June '20

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.

More from 1 Thing A Week
« Top 3 gadgets around the home Roundup of Apple's 2019 WWDC keynote HEX, RGB, and HSL colors in CSS Launching SITEJOY, a gallery of fast & responsive websites »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 137.1 – Monday
    1. New Zealand to lift all restrictions as it declares itself virus-free bbc.co.uk
  2. 137.2 – Tuesday
    1. Images from a worldwide protest movement theatlantic.com
    2. We must be anti-racist swiss-miss.com
    3. What do we mean when we say defund the police? twitter.com
    4. Britain goes coal free for two months bbc.co.uk
  3. 137.3 – Wednesday
    1. Billionaire Boys Club and The Hundreds for Black Lives Matter bbcicecream.com
    2. Tracking the coronavirus pandemic, by the numbers axios.com
  4. 137.4 – Thursday
    1. "7500" trailer Amazon Prime Video on youtube.com
    2. Amazon bans police use of facial recognition tech bbc.co.uk
  5. 137.6 – Saturday
    1. 8:46 – Dave Chapelle Netflix Is A Joke on youtube.com
  6. 137.7 – Sunday
    1. An ode to living on Earth – Oliver Jeffries TED on youtube.com

Jump to notable items for Week #136, Week #138 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit