Subscribe

CSS Logos: Hashnode logo

✍️

Lets recreate some amazing logos by using only CSS: First up Hashnode

22 Mar, 2022 Β· 3 min read

I wanted to start this CSS challenge a while ago by recreating some fantastic logos in CSS only.

I'll be starting with Hashnode, as I re-created this recently for the CSS Hashnode challenge.

See my result of the challenge here

While looking at the logo, we can quickly see a rounded square with a hole in it.

Hashnode logo

This sounds easy enough. However, one thing will make it a bit more complicated.

This is the fact that making the whole see-through can be pretty tricky.

So let's split this up into two sections, one in which we'll make it with a solid color and one that is see-through.

We first have to start by creating the rounded square that is rotated a bit.

For the HTML, we'll be using one div with the class hashnode.

.hashnode {
  width: 5em;
  aspect-ratio: 1;
  border-radius: 1.25em;
  background: #2962ff;
  transform: rotate(45deg);
}

Using the aspect ratio, we make sure the logo is square. We also rotate it by 45 degrees, so it has the same position. At this point, you should have a block looking like this.

Hashnode outline

Now we can leverage the before element to add the white dot on top of this.

&:before {
  content: '';
  border-radius: 50%;
  background: white;
  height: 2em;
  aspect-ratio: 1;
}

And with this, we get a simple round shape. To center the round element, we can add the following two elements to our main wrapper div.

.hashnode {
  display: grid;
  place-items: center;
}

And there you go, you should now have the following result:

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

The main issue with the above solution is that we can't have anything in the background as it would not show through.

So let's try and change that.

The main setup will be the exact same as the above solution:

.hashnode {
  width: 5em;
  aspect-ratio: 1;
  border-radius: 1.25em;
  background: #2962ff;
  transform: rotate(45deg);
}

Then we can leverage a mask to mask out the middle section.

-webkit-mask: radial-gradient(#0000 28%, #000 28%);
mask: radial-gradient(#0000 28%, #000 28%);

This will mask out the center element, so we can add a background and see what happens.

See the Pen CSS Logos: Hashnode logo by Chris Bongers (@rebelchris) on CodePen.

As you can see in the CodePen above, the background shows through the logo, excellent! The mask option is a powerful tool to mask out parts of your elements.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

CSS Logos: Vue logo

22 Jun, 2022 Β· 3 min read

CSS Logos: Vue logo

CSS Logos: Strava logo

21 Jun, 2022 Β· 5 min read

CSS Logos: Strava logo

Join 1828 devs and subscribe to my newsletter