Logo facebook pun juga bisa di buat dengan css Artikel dibawah ini akan menunjukkan tutorial kepada anda tentang  cara membuat Logo Facebook dengan CSS3 tanpa image atau gambar dan tanpa photoshop semua dibuat dengan pure alias murni hanya dengan kode css3. oke, langsung saja ya

berikut ini adalah kode css logo facebook

.wrapper {
z-index: 1;
background-image: -webkit-linear-gradient(top left, #315D9E, #4E70B7);
background-image: -moz-linear-gradient(top left, #315D9E, #4E70B7);
background-image: -o-linear-gradient(top left, #315D9E, #4E70B7);
background-image: linear-gradient(to bottom, #315D9E, #4E70B7);
width: 400px;
height: 400px;
overflow: hidden;
border:0;
padding: 14px;
margin: 100px auto 0 auto;
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
position: relative;
}
.overlay {
position: absolute;
z-index: 1;
left: -200px;
right: 0;
width: 840px;
top: -190px;
height: 380px;
border: 0;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-image: -o-linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1) );
background-image: -moz-linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1) );
background-image: linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1) );
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0),rgba(255,255,255,0.1) );
}
.inner {
position: relative;
height: 360px;
width: 360px;
margin: 0 auto;
border: 20px solid #86A0D0;
border-radius: 65px;
-webkit-border-radius: 65px;
}
.f {
position: relative;
width: 160px;
height: 300px;
border: 0;
float:right;
overflow:hidden;
margin-right: 50px;
margin-top: 40px;
}
.f1 {
position: relative;
margin-left: 45px;
border: 70px solid #f4f7fc;
height: 400px;
width: 400px;
border-radius: 60px;
-webkit-border-radius: 60px;
}
.f2 {
position: absolute;
height: 60px;
width: 100%;
background-color: #f4f7fc;
top: 100px;
}
.inner:hover .f1 {
  border-color: #c6d6f2;
}
.inner:hover .f2 {
  background-color: #c6d6f2;
}

Copy semua kode diatas dan paste di atas kode </head>

Dan berikut ini adalah kode html logo facebook

<div class="wrapper">
<div class="overlay"></div>
<div class="inner">
<div class="f">
<div class="f1"></div>
<div class="f2"></div>
</div>
</div>
</div>

Copy semua kode htmlnya dan paste di dalam widget atau template anda

hasil akhirnya akan terlihat seperti di bawah ini:

lihat juga logo photoshop dan logo android yang juga dibuat dengan css3 Semoga dapat Bermanfaat!