Como fazer o ícone do Facebook com CSS Puro!

0

Com o seletores de CSS3 de níveis 3,4 ficando cada vez mais apurados, a quantidade de coisas que dá pra se fazer é sensacional!

Que tal vermos como criar o ícone do Facebook só com CSS agora mesmo?

Basta adicionar o seguinte código :

<div class="shape">
<div id="facebook-icon"></div>

<style contenteditable="">
#facebook-icon {
  background: #48649F;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 15px solid #48649F;
  border-bottom: 0;
}
#facebook-icon::before {
  content: "/20";
  position: absolute;
  background: #48649F;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
}
#facebook-icon::after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
}

style {
    background: none repeat scroll 0 0 #333;
    color: white;
    display: block;
    font: 12px Monaco;
    padding: 0 15px;
    white-space: pre;
    width:400px;
	margin-top:40px;
}
</style>

</div>
        

 

Vocês podem ver que eu deixei a tag style como editável para que vocês possam “brincar” com mais facilidade.

Veja como fica no final das contas:

facebook icon css

 

 

 

 

Legal, não é mesmo? 🙂

Logo mais irei postar mais exemplos!

Compartilhe.