CSS3 twitter bird – twitterbird


CSS3 twitter bird – twitterbird

how about a CSS3 twitter bird?

This is a pure CSS3 twitter bird.
Demo ..wtf?.. yeah of course.. it’s kinda stupid.. but…
What makes me do stuff like this?
I am preparing a workshop for next week.
some of you might have seen what Lukas Winterberg did in my last workshop. A pure CSS3 mickey mouse and goofy.

I was asked to do a workshop for some of my colleagues. When I asked them which topic they wanted to discuss, it was all about making those “not CSS(ish)” shapes.

Well the twitter bird actually uses quite a few of those shapes.. so I thought.. sure..

Let’s get started.

First let’s look at the markup.
It’s actually pretty simple.

I recommend to ALWAYS use some kind of wrapper (here “#page“).
Inside this wrapper you can feel free and secure to do anything you want.

< !DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/twitterbird.css" />
    </head>
    <body>
        <div id="page">
            <article class="frame">
                <section class="body"></section>
                <section class="wing">
                    <div class="feather1"></div>
                    <div class="feather2"></div>
                    <div class="feather3"></div>
                </section>
                <section class="head"></section>
                <section class="beak">
                    <div class="bottom"></div>
                    <div class="top"></div>
                </section>
            </article>
        </div>

    </body>
</html>

Ok that seems pretty obvious huh?
We have

  • a frame
  • a body
  • wings
  • the head
  • and a beak

the CSS3 magic

Ok now let’s get to the funky part… the CSS
Let’s first take a look at the body, as this is the main part and most other parts use the same shape.

.body {
  position: absolute;
  top: 22px;
  left: 19px;
  width: 200px;
  height: 200px;
  background: #52ade5;
  border-radius: 100%;
  clip: rect(70px, auto, auto, 45px);
}

CSS3 twitter bird twitterbird

So yeah that was easy.. Some might not know the clip property.. trust me it’s really helpful when CSS needs to be funky.
But how can make this crescent shape?
Good old pseudo-elements.
here’s the code for our :before element

.body:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -62px;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 100%;
}

css3 twitter bird twitterbird

And guess what…
Yes.. all other shapes except for the head are using this technique.
The wing:

.wing {
  position: absolute;
  top: 85px;
  left: 60px;
  width: 100px;
  height: 120px;
  overflow: hidden;
}
.wing .feather1 {
  position: absolute;
  top: -40px;
  left: 6px;
  width: 120px;
  height: 150px;
  border-radius: 100%;
  background: #00bbf3;
  -webkit-transform: rotateZ(-7deg);
  -moz-transform: rotateZ(-7deg);
  -ms-transform: rotateZ(-7deg);
  -o-transform: rotateZ(-7deg);
  transform: rotateZ(-7deg);
}
.wing .feather1:before {
  content: '';
  position: absolute;
  top: -32px;
  left: -42px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: white;
}
.wing .feather2 {
  position: absolute;
  top: -61px;
  left: 3px;
  width: 120px;
  height: 150px;
  border-radius: 100%;
  background: #00bbf3;
  -webkit-transform: rotateZ(9deg);
  -moz-transform: rotateZ(9deg);
  -ms-transform: rotateZ(9deg);
  -o-transform: rotateZ(9deg);
  transform: rotateZ(9deg);
}
.wing .feather2:before {
  content: '';
  position: absolute;
  top: -33px;
  left: -50px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: white;
}
.wing .feather3 {
  position: absolute;
  top: -73px;
  left: 18px;
  width: 120px;
  height: 150px;
  border-radius: 100%;
  background: #00bbf3;
  -webkit-transform: rotateZ(38deg);
  -moz-transform: rotateZ(38deg);
  -ms-transform: rotateZ(38deg);
  -o-transform: rotateZ(38deg);
  transform: rotateZ(38deg);
}
.wing .feather3:before {
  content: '';
  position: absolute;
  top: -32px;
  left: -37px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: white;
}

twitterbird CSS3 twitter bird

The beak:

.beak {
  position: absolute;
  top: 75px;
  left: 200px;
  width: 40px;
  height: 40px;
}
.beak .bottom {
  position: absolute;
  top: -37px;
  left: -37px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: #00bbf3;
  clip: rect(55px, auto, auto, 50px);
}
.beak .bottom:before {
  content: '';
  position: absolute;
  top: -18px;
  left: 18px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: white;
}
.beak .top {
  position: absolute;
  top: -47px;
  left: -45px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: #00bbf3;
  clip: rect(55px, auto, auto, 50px);
  -webkit-transform: rotateZ(-7deg);
  -moz-transform: rotateZ(-7deg);
  -ms-transform: rotateZ(-7deg);
  -o-transform: rotateZ(-7deg);
  transform: rotateZ(-7deg);
}
.beak .top:before {
  content: '';
  position: absolute;
  top: -18px;
  left: 18px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: white;
}

and last but not least a simple circle to make the head:

.head {
  position: absolute;
  top: 78px;
  left: 149px;
  width: 70px;
  height: 70px;
  background: #00bbf3;
  border-radius: 100%;
}

Et Voilà.. the pure CSS3 twitter bird..

css3 twitterbird

And just because it’s a twitter bird.. .. go on and tweet it

Follow me

Gregor Adams

web developer at Codefights
Hi, I am a web-programmer and frontend-developer from Germany.
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
Follow me

Hi, I am a web-programmer and frontend-developer from Germany. I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

  • Netaji Prabu

    may i know the resizing technique about twitter bird….