Logo Windows Media Player dengan CSS dan HTML

Logo Windows Media Player ini adalah icon/Logo ke-enam yang saya buat dengan css dan html, berikut hasilnya

Anyone can carry his burden, however hard, until nightfall. Anyone can do his work, however hard, for one day. Anyone can live sweetly, patiently, lovingly, purely, till the sun goes down. And this is all life really means. Robert Louis Stevenson

Logo Windows Media Player ini adalah icon/Logo ke-enam yang saya buat dengan css dan html, berikut hasilnya

Last Modif at July 8th, 2011

Logo Windows Media Player ini adalah icon/Logo ke-enam yang saya buat dengan css dan html, sebelumnya saya sudah membuat ini

sebaiknya gunakan firefox, opera, atau chrome untuk membuka halaman ini(saya sudah mengujinya di tiga browser tadi), berikut logo WMP-nya

source code(css html) logo Windows Media Player

<html>
<head>
<title>windows media player Logo Dengan CSS</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#wmp{
margin:50px auto;
width:320px;
height:320px;
background:silver;
padding:5px;
-moz-border-radius:50%;
border-radius:500px;
-webkit-border-radius:500px;
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;
}
#wmp .wmp-border{
float:left;
margin:0;
width:200px;
height:200px;
background:white;
border-top:60px solid green;
border-left:60px solid red;
border-right:60px solid yellow;
border-bottom:60px solid blue;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-moz-border-radius:50%;
border-radius:500px;
-webkit-border-radius:500px;
}
#wmp .wmp-bayangan{
position:relative;
z-index:10;
margin:-290px 0 0 30px;
float:left;
width:260px;
height:260px;
background:transparent;
-moz-border-radius:50%;
-webkit-border-radius:360px;
border-radius:260px;
-moz-box-shadow:1px -9px 36px white, -1px 9px 36px white;
-webkit-box-shadow:1px -9px 36px white, -1px 9px 36px white;
box-shadow:1px -9px 36px white, -1px 9px 36px white;
}
#wmp .wmp-panah{
margin:-5px 0 0 35px;
float:left;
width:0;
height:0;
border-top:70px solid transparent;
border-left:130px solid #222;
border-right:70px solid transparent;
border-bottom:70px solid transparent;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.net)
you? my friend! */
</style>
</head>
<body>
<div id='wmp'>
<div class='wmp-border'>
<div class='wmp-panah'></div>
</div>
<div class='wmp-bayangan'></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>
<!-- regadrs
http://www.indaam.net -->
</body>
</html>

cara menjalankan source code(html css) logo Windows Media Playernya

  • 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.

Indam

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

3 thoughts on “Logo Windows Media Player dengan CSS dan HTML”

  1. Nice Article, inspiring. Aku juga suka nulis artikel bidang bisnis di blogku : http://www.yohanwibisono.com, silahkan kunjungi, mudah-mudahan bermanfaat. thx

  2. ganda says:

    Ini logo lamanya, logo barunya sudah berubah. :D

    1. indam says:

      logo barunya sudah ada ya, saya blum tahu. nanti saya cari deh

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

+
-