DEV Community

Cover image for CSS Logos: Dribbble logo
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)