Twitter icon/logo dengan CSS3 ini adalah icon ke-tigabelas yang saya buat dengan CSS3 dan HTML, sebelumnya saya sudah pernah membuat ini :
- CSS3 : Icon/Logo Facebook with CSS3 and HTML
- CSS3 : Icon/logo Psdfreemium.com with CSS3 and HTML
- Icon/Logo Desaindigital.com with CSS3 and HTML
- Rubik(bentuk) dengan CSS dan HTML
- 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
walaupun sudah banyak yang membuat icon/logo Twitter dengan css3 dan html, namun saya lebih suka membuat versi saya sendiri 
ya walaupun hasilnya lebih jelak 
Ok, seperti yang dahulu-dahulu, gunakan firefox, chrome atau opera untuk membuka halaman ini, why? karena saya sudah megujinya di tiga web browser tadi, berikut logo(bentuk) Twitter yang di buat dengan CSS3 dan HTML
NB*
jika tampilanya kegedean, perkecil browser(peramban) sobat, caranya tekan CTRL + (-)
preview logo Twitter with CSS3 and HTML
source code(css html) logo Twitter
<html>
<head>
<title>Twitter icon/logo with css3</title>
<meta content="indam url:http://www.tw-indaam.com" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.tw-indaam.com"/>
<style type="text/css">
/*
CSS LOGO CREATED BY :
name : Indam
website : http://www.tw-indaam.com
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
#twitter-logo-wrap1{
clear:both;
margin:0 auto;
padding:50px;
width:420px;
}
#twitter-logo-wrap{
float:left;
width:360px;
height:360px;
background:#6bc9ea;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
overflow:hidden;
}
#twitter-logo-wrap .tw-oval{
margin:-560px 0 0 -205px;
width:750px;
height:700px;
float:left;
-moz-border-radius:700px;
/* -webkit-border-radius:700px; */
border-radius:700px;
opacity:0.7;
-moz-box-shadow:inset 0.5px 0 500px #fff;
/* -webkit-box-shadow:inset 0.5px 0 500px #fff; */
box-shadow:inset 0.5px 0 500px #fff;
}
#twitter-logo-wrap2{
float:left;
width:340px;
height:340px;
margin:-130px 0 0 10px;
background:#9edcf1;
-moz-border-radius:50px 50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#twitter-logo{
margin:10px 0 0 10px;
float:left;
width:320px;
height:320px;
background:#6bc9ea;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#twitter-logo .tw-v{
float:left;
margin:10px 0 0 10px;
background:#fff;
width:120px;
height:297px;
-moz-border-radius:100px 100px 20px 170px;
-webkit-border-radius:100px 100px 20px 170px;
border-radius:100px 100px 20px 170px;
}
#twitter-logo .tw-v .tw-in{
float:left;
margin:20px 0 0 25px;
background:#99e9fb;
width:70px;
height:255px;
-moz-border-radius:150px 150px 0px 300px;
-webkit-border-radius:150px 150px 0px 300px;
border-radius:150px 150px 0px 300px;
background:-moz-linear-gradient(
top,
#e3fafe 0%,
#70dbf7 100%)
;
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#e3fafe),
color-stop(100%,#70dbf7)
);
}
#twitter-logo .tw-topright{
float:left;
margin:75.25px 0 0 -15px;
background:#fff;
width:170px;
height:110px;
-moz-border-radius:0 50px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
}
#twitter-logo .tw-topright .tw-in{
float:left;
margin:20px 0 0 -10px;
background:#99e9fb;
width:160px;
height:70px;
-moz-border-radius:0 50px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
background:-moz-linear-gradient(
top,
#c3f1fc 0%,
#a8eafa 100%)
;
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#c3f1fc),
color-stop(100%,#a8eafa)
);
}
#twitter-logo .tw-bottomright{
float:left;
margin:13px 0 0 -15px;
background:#fff;
width:170px;
height:109.5px;
-moz-border-radius:0 50px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
}
#twitter-logo .tw-bottomright .tw-in{
float:left;
margin:17.5px 0 0 -10px;
background:#99e9fb;
width:160px;
height:70px;
-moz-border-radius:0 50px 50px 0;
-webkit-border-radius:0 50px 50px 0;
border-radius:0 50px 50px 0;
background:-moz-linear-gradient(
top,
#8ee3f8 0%,
#71dbf7 100%)
;
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#8ee3f8),
color-stop(100%,#71dbf7)
);
}
</style>
<div id='twitter-logo-wrap1'>
<div id='twitter-logo-wrap'>
<div class='tw-oval'></div>
<div id='twitter-logo-wrap2'>
<div id='twitter-logo'>
<div class='tw-v'>
<div class='tw-in'></div>
</div>
<div class='tw-topright'>
<div class='tw-in'>
</div>
</div>
<div class='tw-bottomright'>
<div class='tw-in'>
</div>
</div>
</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.tw-indaam.com' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.tw-indaam.com -->
</body>
</html>
cara menjalankan source code(html css) logo Twitter-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
sekali lagi, saya buat ini hanya untuk melatih kemampuan css saja, saya masih newbie di bidang css, semakin lama dipelajari CSS3 ini “semakin asik”
Saya sangat suka inovasi2 barunya bikin logo2 bru dengan css3 dan html mas.. Ada kebanggan juga kalo memakai karya sendiri…
hahaha itu hanya untuk melatih kemampuan CSS3 saja
kesan pertama membiru langit
selamat malam 