Você sempre quis criar o logotipo do SoundCloud como um elemento único com CSS puro? Não? Ok, mas vamos lá …
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);
}