Icon Feed Dengan CSS dan html

tulisan ini membahas icon feed yang dibuat dengan css dan html

The three great essentials to achieve anything worth while are, first, hard work; second, stick-to-itiveness; third, common sense. Thomas Edison

tulisan ini membahas icon feed yang dibuat dengan css dan html

Last Modif at July 8th, 2011

ketika saya mampir di blognya bro ganda manurung, disitu dia lagi share icon digg yang dibuat dengan css dan html. penasaran dengan itu, sayapun berniat ikut-ikutan membuat icon dengan css dan html, jadinya ‘saya membuat icon feed dengan css. sebelumnya maaf, sebaiknya buka halaman ini dengan firefox, opera atau chrome. saya tidak mencobanya di safari maupun IE9. berikut hasilnya

source code(css html) icon feed

<html>
<head>
<title>Feed Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
#feed-icon{
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
margin:50px auto;
width:470px;
height:470px;
background-color:orange;
padding:10px 0 0 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;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
#feed-icon .kotak{
float:left;
margin:0;
width:440px;
height:440px;
background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0) 80%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0.0)));
margin:10px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-border-radius:20px;
}
#feed-icon .kotak-dalam{
margin:0;
padding:0px;
width:100%;
height:100%;
overflow:hidden;
}
#feed-icon .lingkaran-pertama{margin:35px 0 0 -350px;
position:relative;
width:590px;
height:590px;
border:80px solid white;
-moz-border-radius:50%;
border-radius:500px;
-webkit-border-radius:500px;
}
#feed-icon .lingkaran-kedua{margin:55px 55px 0 0;
position:relative;
width:320px;
float:right;
height:320px;
border:80px solid white;
-moz-border-radius:50%;
border-radius:400px;
-webkit-border-radius:400px;
}
#feed-icon .lingkaran-kecil{margin:55px 50px 0 0;
position:relative;
width:130px;
float:right;
height:130px;
background:white;
-moz-border-radius:50%;
border-radius:300px;
-webkit-border-radius:300px;
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.net)
you? my friend! */
</style>
</head>
<body>
<div id='feed-icon'>
<div class='kotak'>
<div class='kotak-dalam'>
<div class='lingkaran-pertama'>
<div class='lingkaran-kedua'>
<div class='lingkaran-kecil'></div>
</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 feednya

  • 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

saya membuat 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

16 thoughts on “Icon Feed Dengan CSS dan html”

  1. hendro says:

    Mas indam ada usul nih, gimana kalu transformnya dan box-shadownya di kasih di webkit.
    Di kode kan seperti ini:
    -moz-box-shadow:2px -6px 26px, -2px 6px 26px;

    Asiknya di tambahin di webkit kayanya:

    -webkit-box-shadow: 2px -6px 26px, -2px 6px 26px;

    buat transform rotate juga enaknya kaya gitu sepertinya:
    -webkit-transform:rotate(10deg);
    Kalu border radius ga perlu, paling hanya di gradient, di webkitnya juga ga ada, di kasih inset bisa juga sih di box-shadow.
    Hanya tampilan template ini beda di webkit, kalu rotate transform takut melenceng keluar. Kalu aku langsung ambil yang skew di tambah translate biar posisi pas gitu,,heheheh

    Aku juga sama masih belajar nih mas, tapi aku paling suka bahas beginian.

  2. indam says:

    Mas hendro,
    thanks bgt atas masukanya, saya ngga install browser yg pakai engine layout webkit, jadi ngga bisa ngasih value gitu aja.
    Next icon, saya akan coba nebak2 value :)

    Templatenya beda?
    Pasti mas hendro bukanya pakai chrome, saya memang membuat dua template untuk single post indaam.net ini :)

    hohoho, mari kita sama-sama belajar css.

    Bro Ganda,
    thanks :)

    1. ArdianZzZ says:

      jika anda berniat jadi web developer, saya rasa ini sedikit penting.
      source

      Berniat menjadi webdeveloper tetapi tidak memiliki browser selain Firefox?
      Maaf, saya lebih memilih webkit karena rendering yang lebih baik, lagipula webkit lolos tes ACID3.
      :D

      1. eserzone says:

        Setuju bro, apalagi saya sebagai pengguna internet lemot,,,,,,

  3. indam says:

    Ardianzzz,
    sungguh, saya sangat ingin nginstall semua browser top yg beredar di rana internet.
    Hanya saja, komputer yg saya miliki, sepertinya sudah ngga sanggup lagi untuk nginstall ini itu(sudah sering lengket).
    Ada solusi untuk itu?

    Menurut saya firefox, lebih baik deh dari segi visual, trus tambahan propertynya juga banyak dan property ini belum ada di css3 sekalipun :)

    1. ganda says:

      Gak usah lah semuanya di install. Webkit based browser bisa pakai Chrome, Safari atau yang lain. Trident sudah tentu IE. Gecko cukup Firefox. Selebihnya Opera. Itu saja.

      1. ArdianZzZ says:

        Kalau komputer lelet bisa pakai browser portabel macam Midori.

    2. eserzone says:

      Sekedar sharing bro, kebetulan saya sekarang sedang surver kecil2an ttg browser:
      Web browser di Laptop saya ada 4, dan saya lebih sreg menggunakan chrome… lebih stabil, dan lebih cepet….

      1. ArdianZzZ says:

        Saya pakai Lynk & Opera mobile, lebih stabil, lebih cepat… :P

  4. agung says:

    Tadi sempat nge-Save Source Code-nya ke Desktop dengan Notepad, lalu buka dengan IE8 hasil icon Feed-nya agak kacau hehe.. :D. Ikutan belajar ah.

  5. indam says:

    Ganda,
    thanks bro, yang kurang hanya browser yang pakai engine layout webkit(safari dan chrome)

    eserzone,
    test di warnet, secara visual ff lebih baik. Tapi kalau kecepatan, chrome emang lebih baik.

    Agung,
    saya kan sudah bilang, ngga dirancng buat ie :)

    1. agung says:

      indam,
      tadi cuma ngetes saja kok bro :D, ah ya, kok waktu jam pada kolom komentar kok beda ya? apa itu jam yang ada di server hosting atau bagaimana? Jam 23:30 waktu Jakarta saya harus tidur soalnya hehe…

      1. indam says:

        bukan gan, setting jamnya saya sesuaikan dengan GMT + 8(waktu indonesia tengah indonesia) jadi cepat 1(jam) dangan wib(+7)

    2. ganda says:

      Masalah kecepatan, menurutku itu subjektif. Banyak faktor-faktor lain yang mempengaruhi.

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

+
-