Myspace icon ini adalah icon kelima yang saya buat dengan css3 dan html, sebelumnya saya sudah membuat ini
- Icon Feed Dengan CSS dan html
- Icon Gmail dengan CSS dan HTML
- Icon Friendster dengan CSS dan HTML
- Icon kaskus dengan CSS dan HTML
myspace adalah salah satu jejaring sosial yang cukup populer, dulunya myspace ini menjadi jejaring sosial terpopuler sajagad. yah, myspace mengalahkan facebook dan friendster. berikut adalah icon myspace yang saya buat dangan css3 dan html.
seperti biasa, bukalah halaman ini menggunakan firefox, opera atau chrome, oia IE9 juga bisa(saya menulis standard css3 pada sourcenya) 
, tapi jangan IE9 kebawah ya. ini iconya
source code(css html) icon Myspace
<html>
<head>
<title>myspace Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#myspace{
margin:50px auto 30px auto;
width:470px;
height:470px;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px;
background-color:blue;
padding:10px;
box-shadow:2px -6px 26px black, -2px 6px 26px black;
-moz-box-shadow:2px -6px 26px black, -2px 6px 26px black;
-webkit-box-shadow:2px -6px 26px black, -2px 6px 26px black;
}
#myspace .kotak{
border:10px solid #fff;
float:left;
margin:0;
width:450px;
height:450px;
background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0) 80%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.1)));
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px;
}
#myspace .kiri{width:80px;
margin:70px 0 0 65px;
float:left;
}
#myspace .kiri .lingkaran{
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
margin:0 0 10px 10px;
width:60px;
height:60px;
float:left;
background:white;
-moz-border-radius:50%;
-webkit-border-radius:60px;
border-radius:60px;
}
#myspace .kiri .badan{
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
width:80px;
height:140px;
-moz-border-radius:50% 50% 0 0;
border-radius:40px 40px 0 0;
-webkit-border-radius:50% 50% 0 0;
float:left;
background:white;
}
#myspace .tengah{
width:120px;
margin:50px 0 0 -15px;
float:left;
}
#myspace .tengah .lingkaran{
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
margin:0 0 10px 15px;
width:90px;
height:90px;
float:left;
background:white;
-moz-border-radius:50%;
-webkit-border-radius:90px;
border-radius:90px;
}
#myspace .tengah .badan{width:120px;
height:180px;
float:left;
background:white;
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-border-radius:50% 50% 0 0;
border-radius:60px 60px 0 0;
-webkit-border-radius:50% 50% 0 0;
}
#myspace .kanan{
width:160px;
margin:35px 0 0 -25px;
float:left;
}
#myspace .kanan .lingkaran{
margin:0 0 10px 25px;
width:120px;
height:120px;
float:left;
background:white;
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-border-radius:50%;
-webkit-border-radius:120px;
border-radius:120px;
}
#myspace .kanan .badan{
width:160px;
height:230px;
float:left;
background:white;
-webkit-box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-box-shadow:1px -2px 4px white, -1px 2px 4px white;
box-shadow:1px -2px 4px white, -1px 2px 4px white;
-moz-border-radius:50% 50% 0 0;
border-radius:80px 80px 0 0;
-webkit-border-radius:50% 50% 0 0;
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.com)
you? my friend! */
</style>
</head>
<body>
<div id='myspace'>
<div class='kotak'>
<div class='kiri'>
<div class='lingkaran'></div>
<div style='clear:both'></div>
<div class='badan'></div>
</div>
<div class='tengah'>
<div class='lingkaran'></div>
<div style='clear:both'></div>
<div class='badan'></div>
</div>
<div class='kanan'>
<div class='lingkaran'></div>
<div style='clear:both'></div>
<div class='badan'></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.com' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regadrs
http://www.indaam.com -->
</body>
</html>
cara menjalankan source code(html css) icon Myspacenya
- 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.
Ambil kodenya ah, mau cobain nih. Box-shadow hexnya #000 ya mas, aku coba #333.
Lanjut mas indam!!!
ok, silakan di ambil.
hehehe, ada kesalahan atribut html disitu , tapi saya sudah perbaiki