sebenarnya logo gender ini adalah icon/logo ke dua yang saya buat, hanya saja baru kali ini bisa di online kan, sebleumnya saya sudah buat 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
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 gender yang saya buat dengan CSS3 dan HTML
source code(css html) logo gender
<html>
<head>
<title>Gender Logo dengan CSS dan HTML</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
/* */
#gender-pembentuk-satu{
margin:150px auto;
width:140px;
clear:both;
}
#gender-pembentuk-satu .g-wanita{
margin:0;
float:left;
width:140px;
height:280px;
padding:0;
}
#gender-pembentuk-satu .g-wanita-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid pink;
margin:-124px 0 0 0;
border-radius:500px;
-moz-border-radius:50%;
-webkit-border-radius:500px;
}
#gender-pembentuk-satu .g-wanita-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:140px;
background:pink;
float:left;
}
#gender-pembentuk-satu .g-wanita-garis-mendatar{
width:140px;
height:20px;
background:pink;
float:left;
margin:-70px 0 0 0;
}
#gender-pembentuk-satu .g-pria{
float:left;
margin:0;
width:140px;
height:280px;
padding:0;
-moz-transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-o-transform:rotate(225deg);
}
#gender-pembentuk-satu .g-pria-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid blue;
border-radius:100px;
-moz-border-radius:50%;
-webkit-border-radius:100px;
}
#gender-pembentuk-satu .g-pria-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:120px;
background:blue;
float:left;
}
#gender-pembentuk-satu .g-pria-panah{
width:80px;
height:60px;
float:left;
margin:-70px 0 0 35px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#gender-pembentuk-satu .g-pria-panah .kanan{
width:20px;
height:80px;
background:blue;
float:right;
}
#gender-pembentuk-satu .g-pria-panah .kiri{
width:60px;
height:20px;
background:blue;
float:left;
margin:-20px 0 0 0;
}
#gender-pembentuk-satu .g-waria{
margin:100px 0 0 0;
float:left;
width:140px;
height:280px;
padding:0;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-o-transform:rotate(135deg);
}
#gender-pembentuk-satu .g-waria-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid yellow;
border-radius:100px;
-moz-border-radius:50%;
-webkit-border-radius:100px;
}
#gender-pembentuk-satu .g-waria-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:120px;
background:yellow;
float:left;
}
#gender-pembentuk-satu .g-waria-garis-mendatar{
width:140px;
height:20px;
background:yellow;
float:left;
margin:-90px 0 0 0;
}
#gender-pembentuk-satu .g-waria-panah{
width:80px;
height:60px;
float:left;
margin:-70px 0 0 35px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#gender-pembentuk-satu .g-waria-panah .kanan{
width:20px;
height:80px;
background:yellow;
float:right;
}
#gender-pembentuk-satu .g-waria-panah .kiri{
width:60px;
height:20px;
background:yellow;
float:left;
margin:-20px 0 0 0;
}
/* */
#gender-pembentuk-dua{
margin:350px auto;
width:140px;
clear:both;
}
#gender-pembentuk-dua .g-wanita{
float:left;
margin:0;
width:140px;
height:280px;
padding:0;
}
#gender-pembentuk-dua .g-wanita-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid pink;
margin:0;
border-radius:100px;
-moz-border-radius:50%;
-webkit-border-radius:100px;
}
#gender-pembentuk-dua .g-wanita-lingkaran2{
position:relative;
z-index:2;
width:100px;
height:100px;
float:left;
border:20px solid pink;
margin:-139px 0 0 0;
-webkit-border-radius:100px;
border-radius:100px;
-moz-border-radius:50%;
border-top:20px solid pink;
border-left:20px solid transparent;
border-right:20px solid pink;
border-bottom:20px solid transparent;
}
#gender-pembentuk-dua .g-wanita-garis-panjang{
margin:-2 0 0 58px;
width:20px;
height:140px;
background:pink;
float:left;
}
#gender-pembentuk-dua .g-wanita-garis-mendatar{
width:140px;
height:20px;
background:pink;
float:left;
margin:-70px 0 0 0;
}
#gender-pembentuk-dua .g-pria{
float:left;
margin:-395px 0 0 120px;
width:140px;
height:280px;
-webkit-transform:rotate(225deg);
-moz-transform:rotate(225deg);
-o-transform:rotate(225deg);
padding:0;
}
#gender-pembentuk-dua .g-pria-lingkaran{
-webkit-border-radius:100px;
border-radius:100px;
-moz-border-radius:50%;
width:100px;
height:100px;
float:left;
border:20px solid blue;
}
#gender-pembentuk-dua .g-pria-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:120px;
background:blue;
float:left;
}
#gender-pembentuk-dua .g-pria-panah{
width:80px;
height:60px;
float:left;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
margin:-70px 0 0 35px;
}
#gender-pembentuk-dua .g-pria-panah .kanan{
width:20px;
height:80px;
background:blue;
float:right;
}
#gender-pembentuk-dua .g-pria-panah .kiri{
width:60px;
height:20px;
background:blue;
float:left;
margin:-20px 0 0 0;
}
/* */
#gender-pembentuk-tiga{
clear:both;
margin:450px auto 0 auto;
width:140px;
}
#gender-pembentuk-tiga .g-wanita{
margin:0;
float:left;
width:140px;
height:280px;
padding:0;
}
#gender-pembentuk-tiga .g-wanita-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid red;
margin:-124px 0 0 0;
border-radius:500px;
-moz-border-radius:50%;
-webkit-border-radius:500px;
}
#gender-pembentuk-tiga .g-wanita-garis-panjang{
margin:-3px 0 0 60px;
width:20px;
height:140px;
background:red;
float:left;
}
#gender-pembentuk-tiga .g-wanita-garis-mendatar{
width:140px;
height:20px;
background:red;
float:left;
margin:-70px 0 0 0;
}
#gender-pembentuk-tiga .g-pria{
float:left;
margin:-522px 0 0 50px;
width:140px;
height:280px;
padding:0;
-moz-transform:rotate(225deg);
-webkit-transform:rotate(225deg);
-o-transform:rotate(225deg);
}
#gender-pembentuk-tiga .g-pria-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid red;
border-radius:100px;
-moz-border-radius:50%;
-webkit-border-radius:100px;
}
#gender-pembentuk-tiga .g-pria-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:120px;
background:red;
float:left;
}
#gender-pembentuk-tiga .g-pria-panah{
width:80px;
height:60px;
float:left;
margin:-70px 0 0 35px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#gender-pembentuk-tiga .g-pria-panah .kanan{
width:20px;
height:80px;
background:red;
float:right;
}
#gender-pembentuk-tiga .g-pria-panah .kiri{
width:60px;
height:20px;
background:red;
float:left;
margin:-20px 0 0 0;
}
#gender-pembentuk-tiga .g-waria{
margin:-522px 0 0 -50px;
float:left;
width:140px;
height:280px;
padding:0;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-o-transform:rotate(135deg);
}
#gender-pembentuk-tiga .g-waria-lingkaran{
width:100px;
height:100px;
float:left;
border:20px solid red;
border-radius:100px;
-moz-border-radius:50%;
-webkit-border-radius:100px;
}
#gender-pembentuk-tiga .g-waria-garis-panjang{
margin:-3px 0 0 58px;
width:20px;
height:120px;
background:red;
float:left;
}
#gender-pembentuk-tiga .g-waria-garis-mendatar{
width:140px;
height:20px;
background:red;
float:left;
margin:-90px 0 0 0;
}
#gender-pembentuk-tiga .g-waria-panah{
width:80px;
height:60px;
float:left;
margin:-70px 0 0 35px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#gender-pembentuk-tiga .g-waria-panah .kanan{
width:20px;
height:80px;
background:red;
float:right;
}
#gender-pembentuk-tiga .g-waria-panah .kiri{
width:60px;
height:20px;
background:red;
float:left;
margin:-20px 0 0 0;
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.com)
you? my friend! */
</style>
</head>
<body>
<div id='gender-pembentuk-satu'>
<div class='g-wanita'>
<div class='g-wanita-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-wanita-garis-panjang'></div>
<div class='g-wanita-garis-mendatar'></div>
</div>
<div class='g-pria'>
<div class='g-pria-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-pria-garis-panjang'></div>
<div style='clear:both;'></div>
<div class='g-pria-panah'>
<div class='kanan'></div>
<div style='clear:both;'></div>
<div class='kiri'></div>
</div>
</div>
<div class='g-waria'>
<div class='g-waria-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-waria-garis-panjang'></div>
<div class='g-waria-garis-mendatar'></div>
<div style='clear:both;'></div>
<div class='g-waria-panah'>
<div class='kanan'></div>
<div style='clear:both;'></div>
<div class='kiri'></div>
</div>
</div>
</div>
<!-- --><div style='clear:both;'></div>
<div id='gender-pembentuk-dua'>
<div class='g-wanita'>
<div class='g-wanita-lingkaran'></div>
<div class='g-wanita-lingkaran2'>
</div><div style='clear:both;'></div>
<div class='g-wanita-garis-panjang'></div>
<div class='g-wanita-garis-mendatar'></div>
</div>
<div class='g-pria'>
<div class='g-pria-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-pria-garis-panjang'></div>
<div style='clear:both;'></div>
<div class='g-pria-panah'>
<div class='kanan'></div>
<div style='clear:both;'></div>
<div class='kiri'></div>
</div>
</div>
</div>
<!-- --><div style='clear:both;'></div>
<div id='gender-pembentuk-tiga'>
<div class='g-wanita'>
<div class='g-wanita-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-wanita-garis-panjang'></div>
<div class='g-wanita-garis-mendatar'></div>
</div>
<div class='g-pria'>
<div class='g-pria-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-pria-garis-panjang'></div>
<div style='clear:both;'></div>
<div class='g-pria-panah'>
<div class='kanan'></div>
<div style='clear:both;'></div>
<div class='kiri'></div>
</div>
</div>
<div class='g-waria'>
<div class='g-waria-lingkaran'></div>
<div style='clear:both;'></div>
<div class='g-waria-garis-panjang'></div>
<div class='g-waria-garis-mendatar'></div>
<div style='clear:both;'></div>
<div class='g-waria-panah'>
<div class='kanan'></div>
<div style='clear:both;'></div>
<div class='kiri'></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) logo gender-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 gender 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 
Jujur, aku suka yang terakhir, sekarang baru muncul ga 404 lagi nih…heheheh
ia gan, tadi ada perbaikan makanya saya jadikan draft dulu
Good good good.
Good work? atau Good logo?
Logo yang terakhir itu logo apaan? baru lihat aku.
Benar bro, saya juga baru melihat logo seperti itu…
kayaknya good work deh, logonya kan kurang pas atau jelek.
logo yang trakhir itu kayaknya adalah waria(wanita tapi pria), sebelum saya buat logo ini, yang saya lakukan pertama adalah cari di google dulu ‘pas logonya sudah dapat’. barulah saya melatih kemanpuan css saya ‘dengan cara membuat logo yang sama’ namun menggunakan css
Hahahaha…(ops, jangan tertawa)
emang logonya seperti itu bro?
thanks bro
Aldy,
nggak tahu bro, kayaknya ‘belum ada logo resmi untuk waria’. Jikalaupun nanti ada, mungkin seperti yang diatas