A algum tempo atrás, participei no site do Imasters do “Desafio Css – Especial Revolução”, promovido pelo Bernad de luna.

Basicamente, a proposta do desafio era criar o desenho da bandeira da Turquia utilizando apenas CSS, sem uso de imagens e com a restrição do código HTML abaixo:

[html]

<div class="turquia"></div>

[/html]

Achei a experiência muito interessante, tanto que me empolguei com a ideia de utilizar somente código CSS para criar os mais diversos tipos de desenho. Sendo assim, resolvi desenhar um pequeno smile, utilizando CSS.

O exercício de construir desenhos apenas com CSS pode parecer de início sem utilidade, mas o desafio de construir o desenho faz com que busquemos aprender técnicas diversas, trazendo assim um conhecimento muito bacana.

Bom, chega de conversa e vamos aos códigos:

Inicialmente, criei o desenho utilizando as seguintes tags HTML, mas nada impede que você use menos marcações. Cabe o desafio.

[html]

<div class="smile">

<div class="eye eyeLeft">

<div class="pupila"></div>

</div>

<div class="eye eyeRight">

<div class="pupila"></div>

</div>

</div>

[/html]

Precisei utilizar mais tags HTML para tentar fazer um desenho com um nível de detalhe um pouco maior.
O CSS geral do desenho do seu “corpo” ficou assim:

[css]
.smile {
width: 150px;
height: 150px;
background: #FDCE26; /*Navegadores Antigos*/
background: linear-gradient(to bottom, #FFFB05 0,#FDCE26 31%);
border-radius:100%;
border:4px solid #EBEBEB;
position: relative;
float:left;
margin:5px;
}
[/css]

Muito simples a configuração, onde informamos largura, altura, cor de fundo com um degradê em CSS3 e border radius de 100% para deixar o desenho totalmente redondo, além de outras configurações.

Para criar a boca, utilizei os Pseudo-elementos :before e :after, que criam um conteúdo antes e depois do elemento informado na regra CSS. Consegui o resultado simplesmente posicionando um circulo em cima do outro, formando o desenho do sorriso.

Veja o código:

[css]

.smile:before {
content:&quot;.&quot;;
display:block;
width:80px;
height:80px;
background: #FDCE26;
position:absolute;
top:45px;
left:35px;
border-radius:100%;
z-index:9;
}

.smile:after {
content:&quot;.&quot;;
display:block;
width:80px;
height:80px;
background:#000;
position:absolute;
top:55px;
left:35px;
border-radius:100%;
z-index:1;
}

[/css]

“Sorriso” criado com círculos sobrepostos.

“Sorriso” criado com círculos sobrepostos.

Para a criação dos olhos, uma classe eye utilizada pelos 2 olhos configura suas propriedades em comum:

[css]
.eye {
width:35px;
height:55px;
background:#FFF;
border-radius:100%;
position:relative;
top:20px;
border-top:3px solid #E4BF4C;
z-index:10;
}
[/css]

Logo após, cada olho com sua configuração específica:

[css]
.eyeLeft {
float:left;
left:30px;
}

.eyeRight {
float:right;
right:30px;
}
[/css]

O penúltimo passo, é a criação da íris do olho (parte colorida).

[css]
.iris {
width:25px;
height:35px;
border-radius:100%;
background:#4d7eb6;
position:absolute;
top:17px;
left:5px;
}
[/css]

Para finalizar, construimos a pupila e um pequeno detalhe de luz, utilizando novamente o :before e :after.

[css]
.iris:after{
content:&quot;•&quot;;
display:block;
font-size:60px;
left:2px;
bottom:13px;
position:relative;
}

.iris:before{
content:&quot;.&quot;;
display:block;
width:5px;
height:5px;
background: #FFF;
position:absolute;
left:15px;
top:15px;
z-index:20;
border-radius:100%;
}
[/css]

Confira o resultado final:

Resultado Final