CSS3 : Icon/logo Facebook with CSS3 and HTML

Logo facebook ini adalah satu dari beberapa logo yang saya buat dengan CSS3 dan html, beberapa waktu yang lalu saya sudah membuat logo berikut

Bekerja keras sekarang, merasakan hasilnya nanti; bermalas-malas sekarang, merasakan akibatnya nanti. John C. Maxwell

Logo facebook ini adalah satu dari beberapa logo yang saya buat dengan CSS3 dan html, beberapa waktu yang lalu saya sudah membuat logo berikut

Last Modif at July 8th, 2011

Facebook icon/logo dengan CSS3 ini adalah icon ke-duabelas yang saya buat dengan CSS3 dan HTML, sebelumnya saya sudah pernah membuat ini :

walaupun sudah banyak yang membuat icon/logo facebook dengan css3 dan html, namun saya lebih suka membuat versi saya sendiri :) ya walaupun hasilnya lebih jelak :(
Ok, seperti yang dahulu-dahulu, gunakan firefox, chrome atau opera untuk membuka halaman ini, why? karena saya sudah megujinya di tiga web browser tadi, berikut logo(bentuk) facebook yang di buat dengan CSS3 dan HTML
NB*
jika tampilanya kegedean, perkecil browser(peramban) sobat, caranya tekan CTRL + (-)

preview logo Facebook with CSS3 and HTML

source code(css html) logo Facebook

<html>
<head>
<title>Facebook icon/logo with css3</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<style type="text/css">
/*
CSS LOGO CREATED BY :
name : Indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
#facebook-logo-wrap1{
clear:both;
margin:0 auto;
padding:50px;
width:420px;
}
#facebook-logo-wrap{
float:left;
width:340px;
height:340px;
background:#3a5aa5;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#facebook-logo-wrap .fb-oval{
margin:-540px 0 0 -205px;
width:750px;
height:700px;
float:left;
-moz-border-radius:700px;
/* -webkit-border-radius:700px; */
border-radius:700px;
opacity:0.7;
-moz-box-shadow:inset 10px 1px 500px #fff;
/* -webkit-box-shadow:inset 10px 1px 500px #fff; */
box-shadow:inset 10px 1px 500px #fff;
}
#facebook-logo-wrap2{
float:left;
width:320px;
height:320px;
margin:-150px 0 0 10px;
background:#a8bce2;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#facebook-logo{
margin:10px 0 0 10px;
float:left;
width:300px;
height:300px;
background:#3a5aa5;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
#facebook-logo .fb-hd{
float:right;
width:100px;
height:100px;
background:#fff;
margin:25px 25px 0 0;
-moz-border-radius:50% 0 0 0;
-webkit-border-radius:40px 0 0 0;
border-radius:40px 0 0 0;
}
#facebook-logo .fb-hd .fb-del{
float:right;
width:50px;
height:50px;
background:#3a5aa5;
margin:50px 0 0 0;
-moz-border-radius:50% 0 0 0;
-webkit-border-radius:20px 0 0 0;
border-radius:20px 0 0 0;
}
#facebook-logo .fb-h{
float:left;
width:150px;
height:50px;
background:#fff;
margin:-10px 0 0 125px;
}
#facebook-logo .fb-v{
float:left;
width:50px;
height:120px;
background:#fff;
margin:0 0 0 175px;
}
</style>
</head>
<body>
<div id='facebook-logo-wrap1'>
<div id='facebook-logo-wrap'>
<div class='fb-oval'></div>
<div id='facebook-logo-wrap2'>
<div id='facebook-logo'>
<div class='fb-hd'>
<div class='fb-del'></div>
</div>
<div style='clear:both'></div>
<div class='fb-h'></div>
<div style='clear:both'></div>
<div class='fb-v'></div>
</div>
</div>
</div>
</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.net' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

cara menjalankan source code(html css) logo Facebook-nya

  • copy source code diatas
  • buka notepad atau code editor lainya(saya pakai notepad ++)
  • lalu paste ke notepad(code editor) tadi
  • save as dengan nama ‘terserah.html'(tanpa tanda kutip)
  • pada save as types pilih All types(*.*)
  • ekstensinya harus [dot]html atau [dot]htm
  • klik kanan pada terserah[dot]html, kemudian
  • open with lalu pilih firefox, opera, chrome, atau safari

atau bisa juga

  • klik kanan di area kosong
  • pilih new
  • text document
  • rename menjadi ‘terserah.html'(tanpa tanda kutip)
  • edit lalu masukan source code diatas
  • save
  • klik kanan pada terserah[dot]html, kemudian
  • open width lalu pilih firefox, opera, chrome, atau safari

jika memilih cara kedua, hilangkan dulu centang pada ‘hide extensions for know file types, caranya

  • misal, masuk ke my computer
  • klik tools
  • folder options(tab view)
  • klik view
  • lalu hilangkan centang pada ‘hide extensions for know file types’
  • ok
  • semua file akan memiliki extensi

sekali lagi, saya buat ini hanya untuk melatih kemampuan css saja, saya masih newbie di bidang css, semakin lama dipelajari CSS3 ini “semakin asik” :)

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS3 : Icon/logo Facebook with CSS3 and HTML”

  1. mustofane says:

    itu kan yang udah jadi mas kalau proses pembuatannya gmn cranya mas/tutorialnya

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-