CSS Logos: Dribbble logo

While looking for inspiration for logos to recreate, I browsed Dribbble (the designer social network). Then it hit me, why not create the Dribbble logo.

The one we will be recreating is this one:

Dribbble logo - pink basketball vector

Analysing the logo

We can see the logo represents a basketball, a reference to the product's name.

At first glance, we see it's a round shape, with three lines over it. If we look beyond the scope of the round shape, we can even see these three lines are more oversized round shapes sitting on top of it.

So to recreate this in CSS, we need to start with a round outline and use some child elements to place the three extra lines.

Our outer shape will then receive an overflow none to hide the excess rounds.

CSS Dribbble logo

Let's start by setting up our HTML. I want to keep this as clean as possible, so I'll only use one div and one extra element.

<div class="dribbble">
  <span></span>
</div>

Let's create some root variables to set the container size and the border styles, as we will need them more than once.

:root {
  --size: 15rem;
  --border: 1em solid #c32361;
}

Then let's create the main ball round outline.

.dribbble {
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  background-color: #ea4c89;
  border-radius: 50%;
  border: var(--border);
  border-radius: 100%;
}

This should give us a round surface to work with.

Round ball shape in CSS

An important thing to note on this ball is the overflow: hidden. This property will make sure nothing outside of this shape will show.

Now you might wonder how we get the three overlapping shapes with only one element (span)?

And the question is pseudo elements. In our case, we'll use :before and :after to create the top and bottom lines. And the span for the middle one.

Let's start with setting selectors that are the same for all three. The following code is SCSS, so we don't have to copy-paste it often.

.dribbble {
  &:before,
  &:after,
  span {
    content: '';
    position: absolute;
    border: var(--border);
    border-radius: 100%;
  }
}

Here we set the position to absolute, the border to our border variable, and the radius to 100% to make these shapes round.

Note: Nothing will show up yet as we haven't set the sizes.

Let's quickly set the sizes for the top and bottom lines.

.dribbble {
  &:before,
  &:after {
    width: 125%;
    height: 60%;
  }
}

This should add two ellipsis shapes to our ball.

Ellipsis shapes on our round ball in CSS

Now all that's left for the top and bottom is to position them correctly. I will also apply a rotation to make it look more perspective-like.

.dribbble {
  &:before {
    top: -24%;
    left: -32%;
    transform: rotate(349deg);
  }
  &:after {
    bottom: -30%;
    left: -5%;
    transform: rotate(332deg);
  }
}

This code ensures that the top and bottom are shown correctly.

CSS Ball top and bottom line overlap

The next part is the middle line, for which we'll use the span element. This uses the same technique, but we adjust the height to be bigger than the width.

.dribbble {
  span {
    width: 80%;
    height: 150%;
    top: -26%;
    left: -26%;
    transform: rotate(340deg);
  }
}

And that's it. We should now have our Dribbble logo in CSS. You can see the completed result in this CodePen.

https://codepen.io/rebelchris/pen/KKQBBPR

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

CSS Logos: Dribbble logo

Comments

CSS Logos

CSS Logos: daily dev Logo

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Analysing the logo

CSS Dribbble logo

Thank you for reading, and let's connect!

Command Palette

Comments

CSS Logos

CSS Logos: daily dev Logo

More from this blog

Analysing the logo

CSS Dribbble logo

Thank you for reading, and let's connect!