Kaskus icon ini adalah icon ke-empat yang saya buat dengan css3 dan html, sebelumnya saya sudah membuat ini
saya rasa hampir semua blogger indonesia mengetahui apa itu kaskus? yah, kaskus adalah forum terbesar di indonesia, banyak info yang kita bisa dapat disana.
berikut adalah icon kaskus yang saya buat dengan css3 dan html, semoga saja persis 
.
oia, sebaiknya buka halaman ini dengan firefox, opera dan chrome, karena saya sudah mengujinya di tiga browser tadi “tampilanya hampir sama”. untuk browser IE ternaksud IE9, saya jamin “tampilanya hancur dan berbeda”, ini karena saya menggunakan property rotate ‘dimana setahu saya ‘property ini hanya ada di engine layout gecko, webkit, dan opera. ini hasilnya
source code(css html) icon Kaskus
<html>
<head>
<title>Kaskus Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#kaskus-icon{
margin:50px auto;
width:470px;
height:470px;
background-color:silver;
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;
-moz-border-radius:60px;
border-radius:60px;
-webkit-border-radius:60px;
overflow:hidden;
}
#kaskus-icon .kotak-dalam{
border:10px solid #F88017;
float:left;
margin:0;
width:450px;
height:450px;
background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9) 15%, rgba(255, 255, 255, 0) 80%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.1)));
-moz-border-radius:60px;
border-radius:60px;
-webkit-border-radius:60px;
}
#kaskus-icon .satu{
margin:0 0 0 25px;
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .satu .garis{
margin:200px 0 0 0;
width:35px;
height:30px;
background:#1569C7;
-moz-border-radius:5px 0 0 5px ;
border-radius:5px 0 0 5px ;
-webkit-border-radius:5px 0 0 5px ;
}
#kaskus-icon .dua{
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .dua .garis-atas{
float:left;
width:35px;
background:#1569C7;
height:150px;
margin:80px 0 0 0;
-moz-border-radius:13px 0 13px 0 ;
border-radius:13px 0 13px 0 ;
-webkit-border-radius:13px 0 13px 0 ;
}
#kaskus-icon .dua .garis-bawah{
float:left;
width:35px;
margin:35px 0 0 0;
background:#1569C7;
height:110px;
-moz-border-radius:5px 5px 0 13px ;
border-radius:5px 5px 0 13px ;
-webkit-border-radius:5px 5px 0 13px ;
}
#kaskus-icon .tiga{
height:450px;
width:70px;
float:left;
background:transparent;
}
#kaskus-icon .tiga .garis-atas{
float:left;
width:70px;
background:#1569C7;
height:35px;
margin:80px 0 0 0;}
#kaskus-icon .tiga .garis-bawah{
float:left;
width:70px;
height:35px;
margin:35px 0 0 0;
background:#1569C7;
margin:225px 0 0 0;
}
#kaskus-icon .empat{
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .empat .garis-atas{
float:left;
width:35px;
background:#1569C7;
height:120px;
margin:80px 0 0 0;
-moz-border-radius:0 13px 6px 13px ;
border-radius:0 13px 6px 13px ;
-webkit-border-radius:0 13px 6px 13px ;
}
#kaskus-icon .empat .garis-bawah{
float:left;
width:35px;
height:130px;
margin:35px 0 0 0;
background:#1569C7;
margin:45px 0 0 0;
-moz-border-radius:13px 5px 13px 0 ;
border-radius:13px 5px 13px 0 ;
-webkit-border-radius:13px 5px 13px 0 ;
}
#kaskus-icon .lima{
height:450px;
width:60px;
float:left;
background:transparent;
}
#kaskus-icon .lima .garis-atas{
float:left;
width:140px;
background:#1569C7;
height:35px;
margin:121px 0 0 -36px;
-moz-border-radius:0 6px 0 5px ;
border-radius:0 6px 0 5px ;
-webkit-border-radius:0 6px 0 5px ;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}
#kaskus-icon .lima .garis-bawah{
float:left;
width:145px;
height:35px;
background:#1569C7;
margin:134px 0 0 -36px;
border-radius:6px 0 8px 0 ;
-moz-border-radius:6px 0 8px 0 ;
-webkit-border-radius:6px 0 8px 0 ;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#kaskus-icon .enam{height:450px;
width:80px;
float:left;
background:transparent;
}
#kaskus-icon .enam .garis-atas{
float:left;
width:120px;
background:#1569C7;
height:35px;
margin:79px 0 0 9px;
-moz-border-radius:5px 5px 0 0 ;
border-radius:5px 5px 0 0 ;
-webkit-border-radius:5px 5px 0 0 ;
}
#kaskus-icon .enam .garis-bawah{
float:left;
width:137px;
height:35px;
background:#1569C7;
margin:219px 0 0 16px;
-moz-border-radius:0 50px 50px 12px ;
border-radius:0 50px 50px 12px ;
-webkit-border-radius:0 50px 50px 12px ;
}
#kaskus-icon .tujuh{
height:450px;
width:60px;
float:left;
}
#kaskus-icon .tujuh .garis-atas{
float:left;
width:170px;
background:#1569C7;
height:35px;
margin:133px 0 0 -86px;
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-border-radius:0 12px 60px 0 ;
border-radius:0 12px 60px 0 ;
-webkit-border-radius:0 12px 60px 0 ;
}
#kaskus-icon .tujuh .garis-bawah{
float:left;
width:210px;
height:35px;
background:#1569C7;
margin:98px 0 0 -116px;
-moz-border-radius:0 13px 13px 12px ;
border-radius:0 13px 13px 12px ;
-webkit-border-radius:0 13px 13px 12px ;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.com)
you? my friend! */
</style>
</head>
<body>
<div id='kaskus-icon'>
<div class='kotak-dalam'>
<div class='satu'>
<div class='garis'></div>
</div>
<div class='dua'>
<div class='garis-atas'></div>
<div class='garis-bawah'></div>
</div>
<div class='tiga'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='empat'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='lima'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='enam'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='tujuh'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></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 kaskusnya
- 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.
Ini icon yang paling bagus sejauh ini yang saya lihat.
thanks
Keren gan.. :ilovekaskus:
btw blog ente mangtap gan..
jago CSS ya?
boleh dong ane diajarin gan..
dah 2 tahun belajar ga bisa2.. :hammer: