Gmail icon ini adalah icon kedua yang saya buat dengan css3 dan html, sebelumnya saya sudah membuat
kali ini saya membuat icon gmail dengan css dan html, berikut jadinya;
oops, sebelumnya maaf lagi icon ini ngga mungkin bekerja dengan baik pada IE, opera, jadi silakan gunakan firefox chhrome dan safari.
source code(css html) Icon gmail
<html>
<head>
<title>Gmail Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#gmali-icon{
margin:110px auto;
background:red;
overflow:hidden;
width:600px;
height:400px;
border-top:4px solid red;
border-bottom:4px solid red;
-moz-box-shadow:2px 6px 16px black;
box-shadow:2px 6px 16px black ;
-webkit-box-shadow:2px 6px 16px black;
border-radius:10px;
-moz-border-radius:10px;
}
#gmali-icon .gmail-gariskiri{
width:65px;
margin:0 0 0 5px;
height:400px;
background:red;
float:left;
position:relative;
z-index:3;
}
#gmali-icon .gmail-gariskanan{
width:65px;
margin:0 5px 0 0;
height:400px;
background:red;
float:right;
position:relative;
z-index:3;
}
#gmali-icon .gmail-dalam{
float:left;
width:460px;
height:400px;
background:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#gmali-icon .gmail-dalamatas{
position:relative;
z-index:2;
background:white;
float:left;
width:340px;
height:340px;
border:70px solid red;
border-top:0;
border-left:0;
margin:-170px 0 0 25px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-moz-box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-webkit-box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#gmali-icon .gmail-dalambawah{
position:relative;
z-index:1;
float:left;
width:400px;
height:400px;
border:2px solid red;
border-bottom:0;
border-right:0;
margin:-30px 0 0 30px;
box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-moz-box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-webkit-box-shadow:2px 6px 16px black, 2px 6px 16px black ;
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-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='gmali-icon'>
<div class='gmail-gariskiri'></div>
<div class='gmail-dalam'>
<div class='gmail-dalamatas'></div>
<div class='gmail-dalambawah'></div>
</div>
<div class='gmail-gariskanan'></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 Gmailnya
- 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.
Haha kreatif juga
Salam kenal ya
salam kenal balik
, thanks kunjunganya 
Sepertinya tangkai dari huruf M kurang merapat ke kaki huruf M nya ya?
Contoh jelasnya seperti ini, bagian \ dan / nya kurang dekat ke dua bagian kaki huruf M nya.
/*di coba di peramban Webkit bernama Safari */
Tadi baru install chrome. Ok, segera diperbaiki