CSS Slope Graphs
7 June 2021 | 4:00 am

I’m a sucker for simplistic and beautifully designed visual data on the web. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let’s change that, shall we?

The Demo

I’m basing this demo off the design patterns found in Edward Tufte’s visualization work, specifically his slope graph designs:

See the Pen CSS Slopegraphs by Bradley Taunt (@bradleytaunt) on CodePen.

The HTML

For this concept we will actually be building this graph out of tables - crazy, right? The greatest benefit of rendering all the data inside of a table element is the ability to easily support smaller screens and mobile devices. Larger viewports will get to see the pretty slope graph, while those below a certain threshold will view a simple table.

(But more on that in the CSS section)

<p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p>
<table>
    <thead>
        <tr>
            <th>Pizza Brand</th>
            <th>2011</th>
            <th>2017</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-set="677.0">DiGiorno</td>
            <td><span>677.0</span></td>
            <td data-name="DiGiorno">1014.6</td>
        </tr>
        <tr>
            <td data-set="294.8">Private Label</td>
            <td><span>294.8</span></td>
            <td data-name="Private Label">524.8</td>
        </tr>
        <tr>
            <td data-set="286.1">Red Baron</td>
            <td><span>286.1</span></td>
            <td data-name="Red Baron">572.3</td>
        </tr>
        <tr>
            <td data-set="257.9">Tombstone</td>
            <td><span>257.9</span></td>
            <td data-name="Tombstone">270.6</td>
        </tr>
        <tr>
            <td data-set="164.5">Totino's Party Pizza</td>
            <td><span>164.5</span></td>
            <td data-name="Totino's Party Pizza">347.2</td>
        </tr>
    </tbody>
</table>

As you can see, nothing too fancy is happpening here. Pay close attention to the data-set and data-name variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.

The CSS

To avoid overwhelming your brain all-at-once, let’s break the CSS down into bite-sized chunks, starting with the base styling:

@import url('https://opentype.netlify.com/et-book/index.css');
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: #fffff8;
    font-family: "et-book", serif;
    height: 100%;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 0.5rem;
}

p {
    font-size: 18px;
    margin: 4rem 0 6rem;
}

table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

Pretty basic stuff.

Now we need to design how our slope graph will look on larger screens / desktops. For this instance, we will target these larger devices with a min-width media query of 800px. The rest of the CSS might look a little confusing but I assure you it is quite simple.

  1. On larger devices we hide the first thead tr th element with display: none
  2. The first and second td elements inside each tbody row need to be set as position: absolute to avoid duplicate content
  3. The inner span that we include in our HTML inside the second tbody tr td also needs to be display: none
  4. Remember that data-set variable? We now use that for our :before pseudo element for table tbody tr td:nth-of-type(1)
  5. Remember that data-name variable? We now use that for our :before pseudo element for table tbody tr td:nth-of-type(3)
  6. After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels
@media(min-width:800px) {
    table {
        display: block;
        position: relative;
        margin-bottom: 25rem;
    }

    table thead th {
        border-bottom: 1px solid lightgrey;
        font-size: 24px;
        position: absolute;
        top: -50px;
        width: 45%;
    }
    table thead th:nth-child(1){ display: none; }
    table thead th:nth-child(2){ left: 0; }
    table thead th:nth-child(3){ right: 0; text-align: right; }

    table tbody tr td:nth-of-type(1),
    table tbody tr td:nth-of-type(2) { position: absolute;}

    table tbody tr td:nth-of-type(2) span { display: none; }
    table tbody tr td:nth-of-type(1):before {
        content: attr(data-set);
        margin-right: 10px;
        position: relative;
    }

    table tbody tr td:nth-of-type(2) { padding-left: 10px; }

    table tbody tr td:nth-of-type(3) {
        position: absolute;
        right: 0;
    }
    table tbody tr td:nth-of-type(3):before {
        content: attr(data-name);
        margin-right: 10px;
        position: relative;
    }

    /* Custom individual slopes -- Left */
    tbody tr:nth-child(1) td:nth-child(1),
    tbody tr:nth-child(1) td:nth-child(2) { top: 60px; }
    tbody tr:nth-child(2) td:nth-child(1),
    tbody tr:nth-child(2) td:nth-child(2) { top: 140px; }
    tbody tr:nth-child(3) td:nth-child(1),
    tbody tr:nth-child(3) td:nth-child(2) { top: 165px; }
    tbody tr:nth-child(4) td:nth-child(1),
    tbody tr:nth-child(4) td:nth-child(2) { top: 220px; }
    tbody tr:nth-child(5) td:nth-child(1),
    tbody tr:nth-child(5) td:nth-child(2) { top: 270px; }

    /* Custom individual slopes -- Right */
    [data-name="DiGiorno"] { top: 0; }
    [data-name="Red Baron"] { top: 65px; }
    [data-name="Private Label"] { top: 100px; }
    [data-name="Tombstone"] { top: 180px; }
    [data-name="Totino's Party Pizza"] { top: 150px; }

    /* The custom visual lines */
    tbody tr:after {
        background: black;
        content: '';
        height: 1px;
        left: 14.5%;
        position: absolute;
        width: 70%;
    }
    tbody tr:nth-child(1):after {
        top: 40px;
        transform: rotate(-6deg);
    }
    tbody tr:nth-child(2):after {
        left: 17.5%;
        top: 130px;
        transform: rotate(-4deg);
        width: 65%;
    }
    tbody tr:nth-child(3):after {
        left: 15%;
        top: 125px;
        transform: rotate(-10.25deg);
        width: 70%;
    }
    tbody tr:nth-child(4):after {
        left: 16%;
        top: 210px;
        transform: rotate(-4deg);
        width: 68%;
    }
    tbody tr:nth-child(5):after {
        left: 22%;
        top: 222px;
        transform: rotate(-16deg);
        width: 56%;
    }
}

All that’s left are some minor styles to make everything look nice on mobile:

@media(max-width:800px) {
    p {
        margin: 2rem 0;
    }
    table td, table th {
        border-bottom: 1px solid grey;
        padding: 10px;
    }
    table td:last-of-type, table th:last-of-type {
        text-align: right;
    }
}

Not the most practical

This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.

But it was fun to mess around with and create, so who cares!


SOMA Inspired Terminal Display with CSS
29 May 2021 | 4:00 am

A few years back I played (and loved) SOMA, a first-person sci-fi horror-adventure game. The story was intriguing and the developers nailed the overall atmosphere of Pathos-II. Though both those aspects were great, what I found the most enjoyable were the interactive computers and displays found sprinkled throughout the world.

Three years ago I wanted to see if I could recreate one of those terminal displays with HTML & CSS. And I did just that.

So, why am I writing about this three years later? Well, I never did a proper write-up explaining how I achieved it. I’m sure someone out there in the wild west of the web could get some value out of this tutorial, right? I hope so!

The Live Demo

See the Pen SOMA Inspired Terminal Display (Updated) by Bradley Taunt (@bradleytaunt) on CodePen.

The HTML

Nothing fancy going on here - just some simple div elements holding a few paragraphs and spans:

<div class="outer-frame">
    <div class="screen">
        <div class="screen-guts">
            <h2>Key Control</h2>
            <p><span>Panel Chip</span> (Connector)</p>
            <p class="column">
                Security Keys: 023-027<br>C819738-23
                <br>
                <span class="error">Error: Key Expired</span>
                <br>
                <em>Please update...</em>
            </p>
            <p>
                <span>Permission</span>
                <br>
                Standard ThetaCipher
                <br>
                <span>Secop-Jstrohweier</span>
            </p>
            <button class="update-button">Update Chip</button>
        </div>
        <div class="bottom-controls">
            <button class="back-button">Back 背部</button>
        </div>
    </div>
</div>

The CSS

Let’s just dump all the CSS right here (don’t worry, it looks far more complicated than it really is):

@import url('https://opentype.netlify.com/sansation/index.css');

* {
  box-sizing: border-box;
}

body {
  background: #333;
  font-family: "Sansation", sans-serif;
  padding: 3rem 0;
}

button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: "Inconsolata", "Consolas", mono;
  font-size: 18px;
  transition: 0.3s ease all;
}

.outer-frame,
.screen {
  display: block;
  margin: 0 auto;
  position: relative;
}

.outer-frame {
  background: #ccc url("https://preview.ibb.co/iS9nz7/screen_grunge.png") no-repeat center;
  background-size: cover;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  height: 560px;
  width: 750px;
}
.outer-frame:before {
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
  box-shadow: inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3);
  content: '';
  height: 538px;
  left: 15px;
  position: absolute;
  top: 11px;
  width: 720px;
}

.screen {
  background: #000 url("https://image.ibb.co/gOqSz7/screen_dust.png") no-repeat center;
  background-size: cover;
  border-radius: 5px;
  height: 450px;
  left: 75px;
  padding: 60px;
  position: absolute;
  top: 55px;
  width: 600px;
}
.screen:after {
  background: url("https://s13.postimg.org/85ryuy1o7/dust.png") no-repeat center;
  background-size: cover;
  border-radius: 5px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5), inset 5px 5px 10px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.3);
  content: '';
  height: 100%;
  left: 0;
  opacity: 0.8;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.screen-guts {
  border-bottom: 2px solid #8fc8c8;
  border-top: 2px solid #8fc8c8;
  height: calc(100% - 50px);
  position: relative;
  width: 100%;
  z-index: 0;
}
.screen-guts:after {
  border: 2px solid #8fc8c8;
  color: #8fc8c8;
  content: '键';
  padding: 5px 8px;
  position: absolute;
  right: 0;
  top: 5px;
}
.screen-guts h2 {
  background: #8fc8c8;
  color: #fff;
  display: inline-block;
  font-size: 24px;
  margin: 0 0 30px 0;
  padding: 10px;
}
.screen-guts p {
  color: #8fc8c8;
  font-size: 18px;
  margin: 0 0 30px 0;
}
.screen-guts p.column {
  column-width: 200px;
}
.screen-guts p span {
  text-transform: uppercase;
}
.screen-guts p span.error {
  color: #f37c56;
}
.screen-guts p span em {
  text-transform: none;
}
.screen-guts button.update-button {
  background: #889314;
  bottom: 10px;
  color: #fff;
  padding: 15px 20px;
  position: absolute;
  right: 0;
}
.screen-guts button.update-button:hover {
  background: #515905;
}

.bottom-controls {
  background: #8fc8c8;
  border-radius: 0 0 5px 5px;
  bottom: 0;
  display: flex;
  left: 0;
  height: 50px;
  padding: 5px;
  position: absolute;
  width: 100%;
}
.bottom-controls button.back-button {
  background: rgba(0,0,0,0.2);
  color: #fff;
  line-height: 20px;
  padding: 8px 20px;
  text-transform: uppercase;
}
.bottom-controls button.back-button:hover {
  background: rgba(0,0,0,0.6);
}

The overall styling is fairly simple (which is great for browser support) with only a couple pseudo elements. It’s important to include the custom Sansation typeface, since this is what the game uses for most UI elements and terminals. (I’m loading in this font via my OpenType side project)

The most important properties that truly bring this design together are those associated with the .outer-frame and .screen pseudo elements. Both of these elements use custom background-images that give a little more depth and life to the terminal - in this case fingerprints, dust and smudges.

Feel free to swap these image textures out with your own and alter the terminal as you see fit!


My Changing Opinion on Personal Website Design
19 May 2021 | 4:00 am

Hey would you look at that - my personal blog has been redesigned again! Although I am still using good ol’ Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces.

Gasp! “How could you?!” I hear you ask. Let me explain.

Personal sites should feel personal

I can see how this change might seem hypocritical (it took some convincing myself) but I decided to follow in to footsteps of Kev Quirk and added a little whimsy and character to my website. After all, personal websites should feel personal. My obsession with barebones HTML & CSS serves its purpose on other public projects, but seems limiting for my own little space on the interwebs.

Banned from my own club

I had originally converted this blog’s design to use zero CSS and instead rely solely on default browser styling. The main reasoning for doing so, was to have the ability to include my own personal website in the XHTML Club project. (I never said it was a good reason)

After giving it some thought, I’ve decided that this limitation seemed too extreme even for me.

Moving forward

I know I always say “With this new design, I can finally focus on just writing content!” - but this is a lie. I’ll probably be fiddling with my personal website until the day I die. The good news is that I do have a few tutorial blog posts lined up to publish soon - so be on the lookout for those!

Thanks for reading through my pointless ramblings about personal websites. It’s good to just vent about these things sometimes…



More News from this Feed See Full Web Site