
Criando Smile com CSS 3
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:".";
display:block;
width:80px;
height:80px;
background: #FDCE26;
position:absolute;
top:45px;
left:35px;
border-radius:100%;
z-index:9;
}
.smile:after {
content:".";
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.
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:"•";
display:block;
font-size:60px;
left:2px;
bottom:13px;
position:relative;
}
.iris:before{
content:".";
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:
Comentários
0 Comentários