Logotipo do SoundCloud feito com CSS

Você sempre quis criar o logotipo do SoundCloud como um elemento único com CSS puro? Não? Ok, mas vamos lá …

Cenário

O que é SoundCloud?

SoundCloud é a plataforma de som social líder mundial onde qualquer pessoa pode criar sons e compartilhá-los em qualquer lugar.
http://soundcloud.com

Antes de começarmos…

Eu uso em modo que o conteúdo pode flexivelmente adaptar-se ao dispositivo que está sendo visto em. E você pode redimensionar o elemento alterando o font-sizede body.
Eu uso prefixfree para evitar o inferno do prefixo do fornecedor … você também deveria!
http://leaverou.github.com/prefixfree

Aqui vamos nós!

Elemento único (HTML)

<div class="soundcloud"></div>

As nuvens brancas (CSS)

.soundcloud {
position
:absolute;
left
:50%;
top
:50%;
margin
:-1em 0 0 0;
width
:2em;
height
:2em;
background
: #fff;
background
-size: .4em .4em;
border
-radius:50%;
border
-bottom-left-radius:0;

box
-shadow:
/* top */
-.395em -.65em 0 .3em #fff,

/* right */
1em .25em 0 -.25em #fff,

/* right extension */
.8em .25em 0 -.25em #fff,

/* left */
-.695em 0em 0 0 #fff
;
}

As nuvens listradas (CSS)

.soundcloud:before,
.soundcloud:after {
position
: absolute;
content
: '';
z
-index: -1;
}

/* striped cloud: middle */
.soundcloud:before {
top
:-.25em;
left
:-2.09em;
width
:2.35em;
height
:2.25em;

border
-top-left-radius:50% 40%;
border
-top-right-radius:70%;
border
-bottom-left-radius:0;

background
:
linear
-gradient(left, transparent 50%, #fff 50%),
linear
-gradient(left, #fff 50%, transparent 50%),
linear
-gradient(right, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, 0) 100%)
;
background
-size:
3em 1em,
.2em 1em,
2em 1em
;
}

/* striped cloud: left */
.soundcloud:after {
bottom
:0;
left
:-3.09em;
width
:1.52em;
height
:1.52em;

border
-top-left-radius:50%;
border
-bottom-left-radius:50%;

background
:linear-gradient(left, #fff 50%, transparent 50%);
background
-size: .2em 1em;

/* hide some unwanted stuff */
clip
:rect(auto, 1em, auto, auto);
}

Fonte completa e versão ao vivo

http://codepen.io/TimPietrusky/pen/utnbK