How to make a Cassette Tape with Pure CSS!!!

Is this really pure CSS?

How did you make it?

In this page, I want to show you how did I make it and how does it work.

CodePen Code

This is the actual code for Pure CSS Cassette Tape.

See the Pen Cassette Tape by Yuhomyan (@yuhomyan) on CodePen.

🌾I made the CodePen theme super cute hahaha😄

Anatomy of CSS Cassette Tape

The biggest parent element is “base" which contains “cassette" part. It makes each element to line up in the centre.

The Cassette tape part is inside of “base", and it’s made by 5 elements.

  1. cassette:outline of a cassette, white frame, 1 dot
  2. tape:pink & white label
  3. hole:2 holes
  4. centre:white rectangle between the two holes
  5. dot:3 dots in the white frame

Let’s see the detail of these each element and base.

base

The “base" is literally the base for CSS illustration. It works to place each element in the center.

If we don’t use these properties, all the elements will be gathered in the top left corner.

.base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: -8px;
  background: #ffd6e4;
} 

In this case, flex-direction: column; helps to align elements vertically.

日本語ですが、センター寄せについてはこちらも見てみてください💡

cassette

We’re gonna make the outline of a cassette, white frame, 1 dot.

The class “cassette" is the outline, and it contains the other cassette tape parts like this.

 <div class="cassette">
    <div class="tape">80's MIX
       <div class="hole">
           <div class="center"></div>
       </div>
    </div>
    <div class="dot"></div>
  </div>

But for first, let’s see the “cassette" part itself.

<div class="base">
  <div class="cassette"></div>
</div>
.cassette {
  box-sizing: border-box;
  position: relative;
  width: 300px;
  height: 180px;
  background: #a0d8ef;
  border-radius: 12px;
}

.cassette:before,
.cassette:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}
.cassette:before {
  width: 200px;
  height: 40px;
  border: solid 2px #fff;
  top: 135px;
  left: 50px;
  border-radius: 5px;
}
.cassette:after {
  width: 10px;
  height: 10px;
  background: #fff;
  top: 145px;
  left: 100px;
  border-radius: 100px;
}

Now it looks like this.

I used :before and :after to make a white frame and a single dot. They’re pseudo-code, I can edit them on CSS, but I cannot on HTML, because they don’t exist on HTML.

Pseudocode is very useful. Because it allows you to add two more elements.

It avoids too many elements and makes the code more organized and easier to read. However, you won’t be able to change small details(for example like colours) with HTML as you can in regular code. Whether to use pseudo-code or regular code depends on the situation.

Important

When you use :before & :after, you need to add content: ";. Otherwise, CSS(Stylesheet) detects that there is no content and nothing shows up!

tape

In this Chapter we make pink & white label

<div class="cassette">
    <div class="tape">80's MIX</div>
</div>
.tape{
  box-sizing: border-box;
  position: relative;
  width: 260px;
  height: 110px;
  background: #ffd6e4;
  left: 20px;
  top: 20px;
  text-align: center;
  font-family: Avenir;
  font-size: 23px;
  font-weight: bold;
  color: #ba91e2;
}
.tape:before,
.tape:after{
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}
.tape:before{
  width: 260px;
  height: 50px;
  background: #fff;
  top: 30px;
}
.tape:after{
  width: 260px;
  height: 20px;
  background: #eb6ea0;
  top: 45px;
}

The “tape" itself makes base light pink label, :before makes white part and :after goes hot pink part.

In “tape" part, line 10-14, these settings are all for the font.

  text-align: center; /* centering */
  font-family: Avenir; /* font type */
  font-size: 23px;
  font-weight: bold;
  color: #ba91e2;

hole

Let’s make 2 holes

The “hole" is inside the “tape."

It’s simple. “hole" itself makes sky blue rectangle. :before & :after make 2 white holes.

<div class="cassette">
    <div class="tape">80's MIX
      <div class="hole"></div>
    </div>
</div>
.hole{
  position: relative;
  width: 160px;
  height: 40px;
  background: #a0d8ef;
  border-radius: 12px;
  top: 10px;
  left: 52px;
  z-index: 2;
}
.hole:before,
.hole:after{
  content: '';
  position: absolute;
}
.hole:before{
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 100px;
  left: 5px;
  top: 5px;
}
.hole:after{
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 100px;
  right: 5px;
  top: 5px;
}

Now it looks like this! Much closer😁

center

A white rectangle between 2 holes

This is pretty simple. It’s inside in “hole" which is in the “tape".

<div class="cassette">
    <div class="tape">80's MIX
      <div class="hole">
        <div class="center"></div>
      </div>
    </div>
</div>
.center{
  position: relative;
  width: 40px;
 height: 20px;
  background: #fff;
  left: 60px;
  top: 10px;
}
📣almost done!

dot

3 dots

Now we make the last part of this cassette tape.

The “dot" should be written inside the “cassette" and outside the “tape".

Because we want to put them inside the cassette and outside the label.

So the actual code is

<div class="cassette">
    <div class="tape">80's MIX
      <div class="hole">
        <div class="center"></div>
      </div>
    </div>
    <div class="dot"></div>
</div>
.dot {
  position: relative;
  width: 10px;
 height: 10px;
 background: #fff;
  top: 35px;
  left: 190px;
  border-radius: 100px;
}
.dot:before,
.dot:after{
  content: '';
 position: absolute;
}
.dot:before{
  width: 10px;
 height: 10px;
 background: #fff;
  border-radius: 100px;
  right: 110px;
  top: 10px;
}
.dot:after{
  width: 10px;
 height: 10px;
 background: #fff;
  border-radius: 100px;
  left: 20px;
  top: 10px;
}

Now we got a whole shape of a cassette tape. Let’s see in the CodePen(because it’s easier to see a whole stuff).

See the Pen Cassette Tape by Yuhomyan (@yuhomyan) on CodePen.

And you can change the color if you want.

🌾0.25× recommended

See the Pen 80’s groove by Yuhomyan (@yuhomyan) on CodePen.

Summary

That’s it!

I learned a lot trying to accomplish this shape, and I’m sure there are far better ways to do it.

Every day I’m making new illustration.

Please check it out if you like😄

Thank you for reading, see you soon in the next post!