logo/bentuk rubik ini adalah logo ke sembilan yang saya buat dengan CSS dan HTML, sebelumnya saya sudah membuat ini
- Icon Feed Dengan CSS dan html
- Icon Gmail dengan CSS dan HTML
- Icon Friendster dengan CSS dan HTML
- Icon kaskus dengan CSS dan HTML
- Icon Myspace dengan CSS dan HTML
- Logo Windows Media Player dengan CSS dan HTML
- Icon Technorati dengan CSS dan HTML
- Logo Gender dengan CSS dan HTML
seperti yang dahulu-dahulu, gunakan firefox, chrome atau opera untuk membuaka halaman ini, why? karena saya sudah megujinya di tiga web browser tadi, berikut logo(bentuk) rubik yang saya buat dengan CSS3 dan HTML
NB*
jika tampilanya kegedean, perkecil browar agan, caranya tekan CTRL + (-)
source code(css html) logo rubik
<html>
<head>
<title>rubik logo(bentuk) Dengan CSS</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#rubik-satu{
margin:150px auto;
width:320px;
height:700px;
}
#rubik-satu .kiri{
-moz-transform:matrix(1, 1, 0, 1, 0, 0);
-webkit-transform:matrix(1, 1, 0, 1, 0, 0);
-o-transform:matrix(1, 1, 0, 1, 0, 0);
float:right;
width:220px;
height:320px;
background:black;
margin:-320px 320px 0 0px;
}
#rubik-satu .kanan{
-moz-transform:matrix(1, -1, 0, 1, 0, 0);
-webkit-transform:matrix(1, -1, 0, 1, 0, 0);
-o-transform:matrix(1, -1, 0, 1, 0, 0);
float:left;
width:220px;
height:320px;
background:black;
}
#rubik-satu .atas{
margin:90px 0 0px -110px;
-moz-transform:matrix(1, -1, 1, 1, 0, 0);
-webkit-transform:matrix(1, -1, 1, 1, 0, 0);
-o-transform:matrix(1, -1, 1, 1, 0, 0);
float:left;
width:220px;
height:220px;
background:black;
}
#rubik-satu .dalam-kanan{
float:left;
width:66px;
height:99px;
background:pink;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-satu .dalam-atas{
float:left;
width:66px;
height:66px;
background:pink;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-satu .dalam-kiri{
float:left;
width:67px;
height:100px;
background:pink;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-dua{
margin:150px auto;
width:320px;
height:700px;
}
#rubik-dua .kiri{
-moz-transform:matrix(1, 1, 0, 1, 0, 0);
-webkit-transform:matrix(1, 1, 0, 1, 0, 0);
-o-transform:matrix(1, 1, 0, 1, 0, 0);
float:right;
width:220px;
height:320px;
background:black;
margin:-358px 320px 0 0px;
}
#rubik-dua .kanan{
-moz-transform:matrix(1, -0.45, 0, 1, 0, 0);
-webkit-transform:matrix(1, -0.45, 0, 1, 0, 0);
-o-transform:matrix(1, -0.45, 0, 1, 0, 0);
float:left;
width:320px;
height:320px;
background:black;
}
#rubik-dua .atas{
margin:0 0 0 -111px;
-moz-transform:matrix(1, -0.45, 1, 1, 0, 0);
-webkit-transform:matrix(1, -0.45, 1, 1, 0, 0);
-o-transform:matrix(1, -0.45, 1, 1, 0, 0);
float:left;
width:320px;
height:220px;
background:black;
}
#rubik-dua .dalam-kanan{
float:left;
width:100px;
height:100px;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-dua .dalam-atas{
float:left;
width:100px;
height:68px;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-dua .dalam-kiri{
float:left;
width:67px;
height:100px;
margin:5px 0 0 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-tiga{
margin:150px auto 0 300px;
width:220px;
float:left;
-moz-transform: rotate(25deg);
-o-transform:rotate(25deg);
-webkit-transform: rotate(25deg);
}
#rubik-empat{
margin:-250px auto 300px 300px;
width:220px;
float:left;
-o-transform: rotate(168deg);
-moz-transform: rotate(168deg);
-webkit-transform: rotate(168deg);
opacity:0.6;
}
#rubik-lima{
margin:150px auto 550px auto;
width:220px;
clear:both;
}
#rubik-lima .dalam,
#rubik-empat .dalam,
#rubik-tiga .dalam{
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
float:left;
width:220px;
height:110px;
background:black;}#rubik-lima .dalam .kk,
#rubik-empat .dalam .kk,
#rubik-tiga .dalam .kk{
width:70.4px;
margin:2px 0 0 2px;
float:left;
height:34px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}#rubik-lima .dalam2,
#rubik-empat .dalam2,
#rubik-tiga .dalam2{
-moz-transform: skewY(-45deg);
-o-transform:skewY(-45deg);
-webkit-transform:skewY(-45deg);
float:left;
width:110px;
height:220px;
background:black;
margin:-55px 0 0 165px;
}
#rubik-lima .dalam2 .kk,
#rubik-empat .dalam2 .kk,
#rubik-tiga .dalam2 .kk{
height:70.4px;
margin:2px 0 0 2px;
float:left;
width:34px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#rubik-lima .dalam3,
#rubik-empat .dalam3,
#rubik-tiga .dalam3{
float:left;
width:220px;
height:220px;
background:black;
margin:-165px 0 0 -55px;
}
#rubik-lima .dalam3 .kk,
#rubik-empat .dalam3 .kk,
#rubik-tiga .dalam3 .kk{
height:70.2px;
margin:2px 0 0 2px;
float:left;
width:70.7px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.com)
you? my friend! */
</style>
</head>
<body>
<div id='rubik-satu'>
<div class='atas'>
<div class='dalam-atas' style='background:orange;'></div>
<div class='dalam-atas' style='background:lime;'></div>
<div class='dalam-atas' style='background:orange;'></div>
<div class='dalam-atas' style='background:lime;'></div>
<div class='dalam-atas' style='background:lime;'></div>
<div class='dalam-atas' style='background:lime;'></div>
<div class='dalam-atas' style='background:orange;'></div>
<div class='dalam-atas' style='background:lime;'></div>
<div class='dalam-atas' style='background:orange;'></div>
</div>
<div class='kanan'>
<div class='dalam-kanan' style='background:yellow;'></div>
<div class='dalam-kanan' style='background:blue;'></div>
<div class='dalam-kanan' style='background:yellow;'></div>
<div class='dalam-kanan' style='background:blue;'></div>
<div class='dalam-kanan' style='background:blue;'></div>
<div class='dalam-kanan' style='background:blue;'></div>
<div class='dalam-kanan' style='background:yellow;'></div>
<div class='dalam-kanan' style='background:blue;'></div>
<div class='dalam-kanan' style='background:yellow;'></div>
</div>
<div class='kiri'>
<div class='dalam-kiri' style='background:white;'></div>
<div class='dalam-kiri' style='background:red;'></div>
<div class='dalam-kiri' style='background:white;'></div>
<div class='dalam-kiri' style='background:red;'></div>
<div class='dalam-kiri' style='background:red;'></div>
<div class='dalam-kiri' style='background:red;'></div>
<div class='dalam-kiri' style='background:white;'></div>
<div class='dalam-kiri' style='background:red;'></div>
<div class='dalam-kiri' style='background:white;'></div>
</div>
</div>
<div id='rubik-dua'>
<div class='atas'>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
<div class='dalam-atas' style='background:blue;'></div>
</div>
<div class='kanan'>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
<div class='dalam-kanan' style='background:orange;'></div>
</div>
<div class='kiri'>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
<div class='dalam-kiri' style='background:lime;'></div>
</div>
</div>
<div id='rubik-tiga'>
<div class='dalam'>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
</div>
<div class='dalam2'>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
</div>
<div class='dalam3'>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
</div>
</div>
<div id='rubik-empat'>
<div class='dalam'>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
</div>
<div class='dalam2'>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
</div>
<div class='dalam3'>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
</div>
</div>
<div id='rubik-lima'>
<div class='dalam'>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
<div class='kk' style='background:blue;'></div>
</div>
<div class='dalam2'>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:orange;'></div>
<div class='kk' style='background:orange;'></div>
</div>
<div class='dalam3'>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:lime;'></div>
<div class='kk' style='background:red;'></div>
<div class='kk' style='background:red;'></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) logo rubik-nya
- 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
walaupun logo rubik ini jadinya jelek, tapi bikinya lumayan rumit loh, coba aja edit-edit sourcenya ‘kalau mau’ 
sekali lagi, saya buat ini hanya untuk melatih kemampuan css saja, saya masih newbie di bidang css ini 
Wah,,…hebat…
saya ijin copy ya…buat di pelajari….
silakan di copy
Wah hebat banget nih mas Indam, memang css sangat mendukung desain dalam web..
Makasih tutorialnya mas Indam..
Salam kenal..
ini masih terus belajar bro
Kayaknya lagi eksperimen besar-besar tentang kemampuan CSS3.
hehehe…, sepertinya begitu bro ‘saya lagi happy-happy-nya velajar css3′
salam kenal gan, kunjungan balik ditunggu di sini http://ramlannarie.wordpress.com/ dan http://ramlannarie.blogspot.com/
salam kenal balik gan.