In the last few months there has been an exploit of articles demonstrating the power and flexibility of CSS3.
Probably almost every serious web designer know how they work, what they are, and have read some of these articles. But at the same time, not everyone knows what can be really accomplished with them. You can use them for setting up shadows within the browser instead using a graphic software, embed web-fonts and enhance typography, animate the page elements, design beatiful rounded boxes, and much more!

In this tutorial we will use mostly the border-radius property in order to design the Twitter’s “T” in pure CSS! We won’t use pics or JavaScript. Only pure, beautiful, CSS3 and a bit of HTML markup!

Border-Radius Theory

With the introduction of border-radius property in CSS3, it’s now possible for web designers to design perfectly rounded boxes without using images or JavaScript workaround.
The basilar syntax of border-radius it’s the following:

div { border-radius: 10px; }

This simple declaration creates a div with all the corners rounded by a radius of 10 pixel. If you are in need, for example, of having only the top left corner rounded, you can do it in this way:

div { border-top-left-radius: 15px; }

This will create a div with only the top left corner rounded, with a radius of 15 pixel. As you probably know, this property it’s not fully supported by all the browsers. For this reason WebKit and Gecko browsers uses their own version of the border-radius property.
A WebKit browser like Safari or Chrome, will use the border-radius property with the -webkit prefix:

div { -webkit-border-radius: 5px; }

The same is for Gecko browsers, like Firefox, that instead use the -moz prefix:

div { -moz-border-radius: 20px; }

WebKit’s specific rules with the -webkit prefix uses the same syntax of the standard border-radius property. That means that if the standard border-radius property tells that for displaying the bottom right corner rounded you must write

div { border-bottom-right-radius: 10px; }

WebKit browsers will render it as follow:

div { -webkit-border-bottom-right-radius: 10px; }

Gecko browsers, instead, have their own syntax that is, using the same example:

div { -moz-border-radius-bottomright: 10px; }

Please note that since now, Internet Explorer doesn’t support this CSS3 property. Buy I guess you’re not surprised! Exist, though, some workaround.

The HTML

For designing the Twitter logo in pure CSS, what is needed is a dose of patience a some basilar skills in writing HTML and CSS. By the way, every passage is clearly explained.

First of all we will start from the structure of the HTML. For designing the Twitter’s “T” with CSS, we need to create some elements to be styled. For this purpose, we will divide the “T” in 6 pieces.
Starting from the top we will have the rounded end of the vertical stem, the actual vertical stem, the horizontal stroke, the bottom left “bowl”, the terminal bottom right stem and a “negative” element. We will dig on their use later in this tutorial.

Since every single piece that creates the “T” is positioned in the page in pixel-perfect coordinates, and since we need to stack the pieces on two layers in order to create the white outline, we will enclose all the pieces in two containers div.
So we will have the cyan “T” coded as follow:

<div id="t">
<span class="top"></span>
<span class="vertical"></span>
<span class="horizontal-big"></span>
<span class="round"></span>
<span class="horizontal-small"></span>
<span class="negative"></span>
</div>

The div has its own id and contains 6 spans that will actually draw the final “T”. For the white outline, the structure is exactly the same, except that the id of the container div will have another value.

<div id="t-outline">
<span class="top"></span>
<span class="vertical"></span>
<span class="horizontal-big"></span>
<span class="round"></span>
<span class="horizontal-small"></span>
<span class="negative"></span>
</div>

This is all the markup we need for designing our Twitter logo.

The CSS

First we need to do a quick reset and apply a few general styles to the page:

* { margin: 0; padding: 0; }
html {background-color: #333;}
body { overflow: hidden; }

The first row target all the elements and set a margin and a padding of 0 pixel in order of having the elements ”clean“ and mantain the possibility to style them as we want, without wondering of the browser’s standard styles. The second row target the html element and gives to it a dark gray background color for enhancing the contrast from the Twitter’s “T” and the background (white as standard). Adding an overflow: hidden to the body element is an escamotage for let the browser don’s show the scroll bar.

Than we will style the two container div giving them an absolute positioning that permits us to position the inner elements relative to the parent instead of the whole page, and moving them 100px distant from both the top and left page boundary.

#t, #t-outline {
position: absolute;
top: 100px;
left: 100px;
}

Next, we need to style the inner spans, that will work as single components of the whole logo.

#t span {
display: block;
background-color: #3CF;
}

#t-outline span {
display: block;
background-color: #FFF;
}

We gave, naturally, a display: block to the span in order to have the possibility of setting their sizes, and then we choosed their background colors. #3CF is the Twitter’s cyan, and #FFF is a bright white.
Following is the rest of styles needed for the design of the logo. While looking at them, remember that the elements targeted with the #t selector are the a cyan-span, while those with the #t-outline selector are those for the white ouline of the logo.

#t .top {
width: 90px;
height: 45px;
-webkit-border-top-left-radius: 45px;
-webkit-border-top-right-radius: 45px;
-moz-border-radius-topleft: 45px;
-moz-border-radius-topright: 45px;
border-top-left-radius: 45px;
border-top-right-radius: 45px;
position: relative;
z-index: 20;
}

#t-outline .top {
width: 130px;
height: 65px;
-webkit-border-top-left-radius: 65px;
-webkit-border-top-right-radius: 65px;
-moz-border-radius-topleft: 65px;
-moz-border-radius-topright: 65px;
border-top-left-radius: 65px;
border-top-right-radius: 65px;
position: relative;
top: -20px;
left: -20px;
z-index: 10;
}

#t .horizontal-big {
width: 170px;
height: 90px;
-webkit-border-top-right-radius: 45px;
-webkit-border-bottom-right-radius: 45px;
-moz-border-radius-topright: 45px;
-moz-border-radius-bottomright: 45px;
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
position: relative;
top: -135px;
left: 90px;
z-index: 20;
}

#t-outline .horizontal-big {
width: 190px;
height: 130px;
-webkit-border-top-right-radius: 65px;
-webkit-border-bottom-right-radius: 65px;
-moz-border-radius-topright: 65px;
-moz-border-radius-bottomright: 65px;
border-top-right-radius: 65px;
border-bottom-right-radius: 65px;
position: relative;
top: -175px;
left: 90px;
z-index: 10;
}

#t .vertical {
width: 90px;
height: 170px;
position: relative;
z-index: 20;
}

#t-outline .vertical {
width: 130px;
height: 170px;
position: relative;
top: -20px;
left: -20px;
z-index: 10;
}

#t .bowl {
width: 145px;
height: 125px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
top: -90px;
z-index: 20;
}

#t-outline .bowl {
width: 185px;
height: 145px;
-webkit-border-bottom-left-radius: 185px;
-moz-border-radius-bottomleft: 185px;
border-bottom-left-radius: 185px;
position: relative;
top: -150px;
left: -20px;
z-index: 10;
}

#t .horizontal-small {
width: 110px;
height: 90px;
-webkit-border-top-right-radius: 45px;
-webkit-border-bottom-right-radius: 45px;
-moz-border-radius-topright: 45px;
-moz-border-radius-bottomright: 45px;
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
position: relative;
top: -180px;
left: 145px;
z-index: 20;
}

#t-outline .horizontal-small {
width: 130px;
height: 130px;
-webkit-border-top-right-radius: 65px;
-webkit-border-bottom-right-radius: 65px;
-moz-border-radius-topright: 65px;
-moz-border-radius-bottomright: 65px;
border-top-right-radius: 65px;
border-bottom-right-radius: 65px;
position: relative;
top: -280px;
left: 145px;
z-index: 10;
}

#t .negative {
background-color: #FFF;
width: 60px;
height: 40px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
top: -310px;
left: 90px;
z-index: 20;
}

#t-outline .negative {
background-color: #333;
width: 60px;
height: 20px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
top: -430px;
left: 110px;
z-index: 30;
}

Let’s study the stylesheet! In every rule we started setting the part’s sizes. These dimensions are derived from a misurement of the actual Twitter logo I’ve made. I’ve tryed to mantain mostly the right proportion than the exact misures. However, I consider it quite accurate.

After setting the dimensions of the elements, we have setted up the right rules for creating the rounded shapes of the logo. As already seen before, I’ve written 3 times the border-radius rules, one time for every “version”. One for WebKit browsers, one for Geckos, and lastly the generic one. Sometimes the rounding has been done only to a corner of the shape, while in other situation has been necessary to round 2 corners. Pay attention to the position of the rounded corner to understand how this property works.

Usually in the last 3 rows of the rule you have found the positioning of the element, done with the top and left properties. If you are wondering why sometimes there are negative values, is because the relative positioning starts from where the element is positioned in the normal flow of the page. So if I have to rise it to the top, I have to give it a negative value.
The very last row of every rule is the z-index property. z-index let the designer choose the stack of the element relativement to the other on the page. So the element—that must be positioned absolutely or relatively—with the higher number in the z-index, will stay upon every other one. For this example I’ve setted the white outline to a lower level respect the cyan spans. In this way we have the illusion of having only an outline, while really is a full white shape.

The .negative span is for the inner bowl of the “T”. Using it, we cover the .bowl‘s top right corner that should be visible out of the bounds of the other spans. For the #t .negative we have used a #FFF background color to create the white ouline, while in the #t-outline .negative we have refined it with the #333 dark gray background. Note that the #t-outline .negative has a z-index of 30 that set it over all the other span.

Putting All Together

If we put all together, with only a few other tags for creating a very basic HTML page, the result will be:

<html>

<head>
<title>Twitter logo in pure CSS3!</title>
<style>
* { margin: 0; padding: 0; }

html {background-color: #333;}

body { overflow: hidden; }

#t, #t-outline {
position: absolute;
top: 100px;
left: 100px;
}

#t span {
display: block;
background-color: #3CF;
}

#t-outline span {
display: block;
background-color: #FFF;
}

#t .top {
width: 90px;
height: 45px;
-webkit-border-top-left-radius: 45px;
-webkit-border-top-right-radius: 45px;
-moz-border-radius-topleft: 45px;
-moz-border-radius-topright: 45px;
border-top-left-radius: 45px;
border-top-right-radius: 45px;
position: relative;
z-index: 20;
}

#t-outline .top {
width: 130px;
height: 65px;
-webkit-border-top-left-radius: 65px;
-webkit-border-top-right-radius: 65px;
-moz-border-radius-topleft: 65px;
-moz-border-radius-topright: 65px;
border-top-left-radius: 65px;
border-top-right-radius: 65px;
position: relative;
top: -20px;
left: -20px;
z-index: 10;
}

#t .horizontal-big {
width: 170px;
height: 90px;
-webkit-border-top-right-radius: 45px;
-webkit-border-bottom-right-radius: 45px;
-moz-border-radius-topright: 45px;
-moz-border-radius-bottomright: 45px;
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
position: relative;
top: -135px;
left: 90px;
z-index: 20;
}

#t-outline .horizontal-big {
width: 190px;
height: 130px;
-webkit-border-top-right-radius: 65px;
-webkit-border-bottom-right-radius: 65px;
-moz-border-radius-topright: 65px;
-moz-border-radius-bottomright: 65px;
border-top-right-radius: 65px;
border-bottom-right-radius: 65px;
position: relative;
top: -175px;
left: 90px;
z-index: 10;
}

#t .vertical {
width: 90px;
height: 170px;
position: relative;
z-index: 20;
}

#t-outline .vertical {
width: 130px;
height: 170px;
position: relative;
top: -20px;
left: -20px;
z-index: 10;
}

#t .bowl {
width: 145px;
height: 125px;
top: -90px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
z-index: 20;
}

#t-outline .bowl {
width: 185px;
height: 145px;
-webkit-border-bottom-left-radius: 185px;
-moz-border-radius-bottomleft: 185px;
border-bottom-left-radius: 185px;
position: relative;
top: -150px;
left: -20px;
z-index: 10;
}

#t .horizontal-small {
width: 110px;
height: 90px;
top: -180px;
left: 145px;
-webkit-border-top-right-radius: 45px;
-webkit-border-bottom-right-radius: 45px;
-moz-border-radius-topright: 45px;
-moz-border-radius-bottomright: 45px;
border-top-right-radius: 45px;
border-bottom-right-radius: 45px;
position: relative;
z-index: 20;
}

#t-outline .horizontal-small {
width: 130px;
height: 130px;
-webkit-border-top-right-radius: 65px;
-webkit-border-bottom-right-radius: 65px;
-moz-border-radius-topright: 65px;
-moz-border-radius-bottomright: 65px;
border-top-right-radius: 65px;
border-bottom-right-radius: 65px;
position: relative;
top: -280px;
left: 145px;
z-index: 10;
}

#t .negative {
background-color: #FFF;
width: 60px;
height: 40px;
top: -310px;
left: 90px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
z-index: 20;
}

#t-outline .negative {
background-color: #333;
width: 60px;
height: 20px;
-webkit-border-bottom-left-radius: 145px;
-moz-border-radius-bottomleft: 145px;
border-bottom-left-radius: 145px;
position: relative;
top: -430px;
left: 110px;
z-index: 30;
}
</style>
</head>

<body>
<div id="t">
<span class="top"></span>
<span class="vertical"></span>
<span class="horizontal-big"></span>
<span class="bowl"></span>
<span class="horizontal-small"></span>
<span class="negative"></span>
</div>
<div id="t-outline">
<span class="top"></span>
<span class="vertical"></span>
<span class="horizontal-big"></span>
<span class="bowl"></span>
<span class="horizontal-small"></span>
<span class="negative"></span>
</div>
</body>

</html>

This is all you need to have your own pure CSS Twitter logo! You can see the final result here: Twitter logo in pure CSS example.