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.com" 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.com)
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.com' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regadrs
http://www.indaam.com -->
</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.
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.
Hm… nice.
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.com ini
hohoho, mari kita sama-sama belajar css.
Bro Ganda,
thanks
Berniat menjadi webdeveloper tetapi tidak memiliki browser selain Firefox?
Maaf, saya lebih memilih webkit karena rendering yang lebih baik, lagipula webkit lolos tes ACID3.
Setuju bro, apalagi saya sebagai pengguna internet lemot,,,,,,
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
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.
Kalau komputer lelet bisa pakai browser portabel macam Midori.
+1.
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….
Saya pakai Lynk & Opera mobile, lebih stabil, lebih cepat…
Tadi sempat nge-Save Source Code-nya ke Desktop dengan Notepad, lalu buka dengan IE8 hasil icon Feed-nya agak kacau hehe..
. Ikutan belajar ah.
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
indam,
, 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…
tadi cuma ngetes saja kok bro
bukan gan, setting jamnya saya sesuaikan dengan GMT + 8(waktu indonesia tengah indonesia) jadi cepat 1(jam) dangan wib(+7)
Masalah kecepatan, menurutku itu subjektif. Banyak faktor-faktor lain yang mempengaruhi.