Icon Kaskus dengan HTML dan CSS ~ Mand4rt

Minggu, November 24, 2013

Akhirnya bisa ngepost lagi setelah beberapa hari absen karna berbagai masalah,oke kali ini saya mau memperlihatkan anda tentang cara membuat Icon Kaskus Dengan Css Dan Html.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.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 computerklik 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. Kaskus Icon Dengan CSS

<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:/haekalfiqri2.blogspot.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><!-- regadrs
http:/haekalfiqri2.blogspot.com -->
</body>
</html>

SUMBER:WWW.INDAAM.COM

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

10 Komentar

HapusBalas

Haekal FikriSenin, 25 November 2013 pukul 14.07.00 WITA Permalink

Mungkin Mas Harus Lebih Mempelajari Tentang -moz-border-radius :D

Sopala MultapaJumat, 29 November 2013 pukul 10.05.00 WITA Permalink

kalau kita peduli sama validasi CSS3 gimana sob ?? apa ada alternatif lain ???

Haekal FikriMinggu, 01 Desember 2013 pukul 09.43.00 WITA Permalink

Memang Sih Sob Itu Berpengaruh Sama Kevalidtan Css3,Tp Untuk Saat Ini Saya Belum Nemuin Alternatifnya :(

Haekal FikriJumat, 06 Desember 2013 pukul 12.50.00 WITA Permalink

Hehe Makasih Sob :D

TaufikJumat, 06 Desember 2013 pukul 17.18.00 WITA Permalink

hadir ah... :D

Haekal FikriSabtu, 07 Desember 2013 pukul 07.18.00 WITA Permalink

hehe Makasih Mas Taufik :D

AnonimRabu, 08 Januari 2014 pukul 19.49.00 WITA Permalink

nice gan. izin coba

UnknownSelasa, 14 Januari 2014 pukul 15.15.00 WITA Permalink

Keren Mas ! MANTAP ! !

Haekal FikriRabu, 15 Januari 2014 pukul 12.18.00 WITA Permalink

hehe silahkan gan :-d

Haekal FikriRabu, 15 Januari 2014 pukul 12.20.00 WITA Permalink

hehe thanks mas dah berkunjung :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag  KODE PANJANG ANDA 
Untuk menyisipkan gambar, gunakan tag  URL GAMBAR 
Untuk menyisipkan Judul, gunakan tag  JUDUL ANDA DI SINI... 
Untuk menciptakan efek tebal gunakan tag  TEKS ANDA DI SINI... 
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI... 

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
$:\$ $\o/$ Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

Mand4rt

Tentang Blog Ini ×

Aura Template

Tentang Saya

Blog & Profil Saya

Daftar Bacaan

Lihat Komunitas

Icon Kaskus dengan HTML dan CSS

Icon Kaskus dengan HTML dan CSS

Snippet Terakhir

10 Komentar