Icon Friendster dengan CSS dan HTML

ini adalah icon ketiga yang saya buat dengan css3 dan html, berikut tampilan dan source icon friensternya

The essential question is not, "How busy are you?" but "What are you busy at?". Oprah Winfrey

ini adalah icon ketiga yang saya buat dengan css3 dan html, berikut tampilan dan source icon friensternya

Last Modif at July 8th, 2011

friendster icon ini adalah icon ketiga yang saya buat dengan css3 dan html, sebelumnya saya sudah membuat ini

seperti pada post terdahulu, buka halaman ini dengan firefox, opera, chrome ‘karena saya sudah mengujinya dan jangan gunakan browser terburuk(hancur) IE. berikut jadinya

source code(css html) icon friendster

<html>
<head>
<title>frienster Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#frienster{
margin:50px auto;
width:580px;
height:580px;
background-color:silver;
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;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
#frienster .kotak-dalam{
float:left;
padding:10px;
width:540px;
height:540px;
background-image:-moz-linear-gradient(rgba(000, 000, 000, 0.6) 10%, rgba(255, 255, 255, 0.9) 90%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(000, 000, 000, 0.6)), to(rgba(255, 255, 255, 0.9)));
margin:10px;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
#frienster .lingkaran{
background:white;
width:500px;
height:500px;
border:20px solid silver;
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
border-radius:500px;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
#frienster .matakiri{
float:left;
background:silver;
width:110px;
height:110px;
margin:80px 0 0 90px;
border-radius:500px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
#frienster .matakanan{
float:right;
background:silver;
width:110px;
height:110px;
margin:80px 90px 0 ;
border-radius:500px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
#frienster .senyum{
margin:80px auto 0;
width:440px;
height:200px;
overflow:hidden;
}
#frienster .senyum .dalam{
margin:-240px auto 0;
background:white;
width:400px;
height:400px;
float:left;
border:20px solid silver;
border-radius:500px;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.net)
you? my friend! */
</style>
</head>
<body>
<div id='frienster'>
<div class='kotak-dalam'>
<div class='lingkaran'>
<div class='matakiri'></div>
<div class='matakanan'></div>
<div style='clear:both;'></div>
<div class='senyum'>
<div class='dalam'></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>
<!-- regadrs
http://www.indaam.net -->
</body>
</html>

cara menjalankan source code(html css) icon friendsternya

  • 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

21 thoughts on “Icon Friendster dengan CSS dan HTML”

  1. agung says:

    Kenapa IE dikatakan terkutuk ya? Ini saya buka pakai Opera Mini juga ndak kelihatan hehe :D, gimana dengan SVG? Pasti bisa kelihatan di browser mungil ini.

  2. APA !? Saya baru tahu kalau CSS dan HTML bisa jadi sebuah icon seperti Friendster dan Gmail gini. Kirain hanya bisa ngatur stylesheet web/blog aja.

  3. indam says:

    Agung,
    pakai ie membuat kita kesulitan belajar.
    Iya lah, mana mungkin tampil sempurna di mobile browes, coba pakai opera dekstop versi 10+. Svg ya, sebenarnya kalau buat gambr dgn ngoding, emang udah ada svg ‘tapi belum ada waktu buat belajar svg itu’.

    Arief,
    itulah uniknya css3.

    1. ganda says:

      Ah. ngga juga. IE gak membuat kesulitan belajar. Itu hanya versi lain dari pembelajaran saya rasa. Selayaknya memang harus tahulah mengenai si IE ini.

      Ah, gak harus CSS3 untuk membuat gambar.

      1. ArdianZzZ says:

        Dulu kalau gak punya IE, saya gak bisa download Firefox. :(

        IE terkutuk? Membuat susah belajar? hmm, bagaimana dengan Firefox versi 1 dan 2? Saya rasa sama terkutuknya. :D

        Bro Ganda, bener, tidak harus CSS3. CSS level 2 juga masih bisa kok. :D psst… saya ingat pernah menggambar menggunakan CSS sejak 2009 lalu, kalau gak salah ada dimari. :)

        1. ganda says:

          Tepat. :D IE masih berguna kok. :D Dan penggunanya masih banyak. Jadi jangan pandang sebelah mata komunitas penggunanya. :D

          Hahaha… Gimana dengan Lynx? Mau mengatakan bahwa browser Lynx juga terkutuk? :D Gak bisa grafis sama sekali? :D

          Tepat sekali bro Ardian. Tidak harus CSS3. Seperti kata Bli Dani, “the man behind the gun” adalah kuncinya, bukan alatnya. :D

    2. Woow keren-keren. Btw dari Bontang ke Balikpapan cuma 3 jam ya mas ? Kapan-kapan kalau saya pulang kampung ketemuan yuk siapa tau saya bisa diajarin nih CSS3 hehehe.

  4. hendro says:

    Kalu ie saya ga mau komentar.
    Tapi yang ini udah empat jempol, pas banget aku lihat di webkitnya juga pas banget.
    Lanjut!!!!

  5. indam says:

    Ganda,
    maksud saya belajar css3, bisa ngga belajar css3 kalo pakai ie?

    Ardianzz,
    maaf bro, jangan lah membahas yg lalu-lalu “itu ngga akan membuat kita berkembng saya rasa.

    Hendro,
    ok dilanjutkan, ini lg coba buat icon google.

    1. ganda says:

      Kan statementnya “pakai ie membuat kita kesulitan belajar.”. Bukan tidak bisa belajar membuat CSS3 di IE. :D Yah, saranku kalau memang mau jadi web designer, ya harus tahulah, perilaku browser terbanyak yang di gunakan ini. :D Hey, banyak loh, bos bos besar perusahaan itu gak ngerti teknologi. Yang mereka ngerti browser ya yang terinstal di OS yang mereka pakai, yakni IE. Mereka gak perduli gimana kamu mau membuatnya, pokoknya harus working in IE.

      Anggap aja IE ini sebuah tantangan. Wong juga menjadi kelebihan mu jika bisa menangani browser2 seperti ini. Apalagi bisa mencakup Lynx. :) Mantap sudah.

      1. ArdianZzZ says:

        Bahkan masih banyak yang memahami “Internet” adalah icon biru IE yang terdapat di taskbar.

        Maksudnya membahas yang lalu-lalu?

        1. indam says:

          Ardianzzz,
          Maksud saya, ngga usah lah dibahas tentang firefox seri 1 dan 2. Kan lebih baik bahas gecko 2 dan firefox 4 saya rasa.

          1. ArdianZzZ says:

            Begitu juga IE6, tidak usah diungkit-ungkit lagi… :)
            Bahkan google chrome sekalipun masih bermasalah dengan border radius pada versi lawasnya.

            Yeah, kalau membandingkan browser seharusnya obyektif. Saat membandingkan FX4 seharusnya dengan IE9.

            1. indam says:

              ok, saya tidak akan mengungkit-ungkit IE lagi.
              pada google chrome, kita bisa gunakan -webkit-border-radius kan? firefox juga masih bermasalah dengan CSS3 standard, untungnya kita bisa memilih opsi -moz, kekuranganya “tidak valid CSS”.

              hohoho, saya sudah janji “tidak mengungkit IE(termaksud IE9) :)

              1. ganda says:

                Memang sudah yakin Fx 4 bakal lebih hebat dari IE9? Well, I don’t think so. Fx 4 aja masih banyak kelemahan. Belum lagi dari sisi manajemen memorinya yang sangat di benci orang. Eh, ya. Pangsa pasar pengguna IE masih diatas dari pengguna browser lainnya. Jangan anggap remeh sebuah komunitas. :D

      2. indam says:

        Ganda,
        lynx kan browser berbasis text? Jadi emang ngga diracang untuk tampilan grafis.
        Kalo css 2.1 Di IE8, saya sedikit bisa menutupi kekuranganya atau membuatnya sama dgn di firefox, dan opera.
        Ia, IE emang masih menduduki pringkat pertama. jika IE tetap seperti ini, saya doakan penggunanya kabur semua.

        Aneh bgt (IE) ini, dikelolah oleh prusahan raksasa tapi kualitasnya malah drop. Mungkin microsoft emang ngga niat, ngembangin IE ini karena ngga bisa di komersialkan?

        1. ganda says:

          Hohoho. Jangan karena Lynx adalah web browser berbasis teks jadi kamu anggap sepele. Coba kamu browsing di blog ini pakai Lynx, dan rasakan, gampang atau tidak mengakses menu-menu dan link-link yang terdapat di blog mu ini.

          Kalau tetap seperti ini, IE 9 gak akan keluar brur! Itu tandanya mereka mau berubah. Kecuali mereka gak mau mengembangkannya lagi.

          Ah, mungkin itu hanya strategi pasar saja.

          1. indam says:

            sudah janji ngga bahas IE.

      3. agung says:

        Ganda,
        Di tempat saya hampir semua menggunakan IE, si Bos juga pakai IE, semua karyawan untuk register cuti, pesan ruang meeting juga dengan IE hehe… :D.

        1. ganda says:

          Di saya malah ada aplikasi yang harus dibuka dari IE. :D

          1. agung says:

            Ganda,
            Dokumentasi atau panduan aplikasi 3D saya juga harus pakai IE untuk membacanya, ndak mau pakai yang lain :D.

            Ya, semua mempunyai kekurangan dan kelebihan masing-masing.

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

+
-