psdfreemium.com icon/logo dengan CSS3 ini adalah icon ke-sebelas yang saya buat dengan CSS3 dan HTML, sebelumnya saya sudah pernah membuat ini :
- 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
apa itu psdfreemium.com
untuk lebih jalasnya silakan berkunjung langsung ke psdfreemium.com
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) psdfreemium.com yang di buat dengan CSS3 dan HTML
NB*
jika tampilanya kegedean, perkecil browser(peramban) sobat, caranya tekan CTRL + (-)
preview logo psdfreemium.com with CSS3 and HTML
source code(css html) logo psdfreemium.com
<html>
<head>
<title>PDSfreemium icon/logo with css3</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<meta content="http://www.psdfreemium.com/" name="original image url"/>
<meta content="http://www.psdfreemium.com/about" name="original author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.com"/>
<style type="text/css">
/*
CSS LOGO CREATED BY :
name : Indam
website : http://www.indaam.com
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
#psdfreemium-wrap{
clear:both;
background:#e2e3e4;
margin:0 auto;
padding:50px;
width:420px;
}
#psdfreemium-wrap #psdf-v{
float:left;
background:#e2e3e4;
width:10px;
height:410px;
position:relative;
z-index:2;
}
#psdfreemium-wrap #psdf-htop{
float:left;
background:#e2e3e4;
width:400px;
height:10px;
position:relative;
z-index:2;
}
#psdfreemium-wrap #hbottom{
clear:both;
background:#e2e3e4;
width:410px;
height:10px;
position:relative;
z-index:2;
}
#psdfreemium{
float:left;
width:400px;
height:400px;
-moz-box-shadow:
inset 10px 10px 10px #643814,
inset -10px -10px 10px #643814;
-webkit-box-shadow:
inset 10px 10px 10px #643814,
inset -10px -10px 10px #643814;
box-shadow:
inset 10px 10px 10px #643814,
inset -10px -10px 10px #643814;
background:#f6ae74;
background:-moz-linear-gradient(
top,
#f6ae74 0%,
#a75717 100%);
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#f6ae74),
color-stop(100%,#a75717)
);
}
#psdfreemium #psdf-p{
float:left;
width:225px;
height:240px;
background:#e2e3e4;
-moz-border-radius:0 115px 115px 0;
-webkit-border-radius:0 115px 115px 0;
border-radius:0 115px 115px 0;
-moz-box-shadow:0 10px 10px #643814;
-webkit-box-shadow:0 10px 10px #643814;
box-shadow:0 10px 10px #643814;
}
#psdfreemium #psdf-p #psdf-inp{
margin:52.5px 0 0 0;
float:left;
width:155px;
height:130px;
background:#dc5c61;
-moz-border-radius:0 95px 95px 0;
-webkit-border-radius:0 95px 95px 0;
border-radius:0 95px 95px 0;
-moz-box-shadow:
inset 0 10px 10px #643814,
inset 0 10px 10px #643814;
/* -webkit-box-shadow:
inset 0 10px 10px #643814,
inset 0 10px 10px #643814; webkit error, view via chrome*/
box-shadow:
inset 0 10px 10px #643814,
inset 0 10px 10px #643814;
}
#psdfreemium #psdf-f{
float:right;
width:115px;
height:400px;
background:#e2e3e4;
-moz-border-radius:70px 0 0 0;
-webkit-border-radius:70px 0 0 0;
border-radius:70px 0 0 0;
-moz-box-shadow:-10px 0 10px #643814;
-webkit-box-shadow:-10px 0 10px #643814;
box-shadow:-10px 0 10px #643814;
}
#psdfreemium #psdf-f #psdf-in{
margin:45px 0 0 0;
float:right;
width:65px;
height:355px;
background:#6aaccd;
background:-moz-linear-gradient(
top,
#6aaccd 0%,
#17668f 100%)
;
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#6aaccd),
color-stop(100%,#17668f)
);
-moz-border-radius:35px 0 0 0;
-webkit-border-radius:35px 0 0 0;
border-radius:35px 0 0 0;
-moz-box-shadow:
inset 8px 8px 10px #2c576e,
inset -8px -8px 10px #2c576e;
/* -webkit-box-shadow:
inset 8px 8px 10px #2c576e,
inset -8px -8px 10px #2c576e; webkit error, view via chrome*/
box-shadow:
inset 8px 8px 10px #2c576e,
inset -8px -8px 10px #2c576e;
}
#psdfreemium #psdf-f #psdf-block{
float:left;
width:0;
height:0;
}
#psdfreemium #psdf-f #psdf-block #psdf-left{
margin:110px 0 0 -60px;
float:left;
width:60px;
height:35px;
background:#e2e3e4;
-moz-box-shadow:
0 10px 10px #643814,
0 -10px 10px rgba(255, 255, 255, 0.4);
-webkit-box-shadow:
0 10px 10px #643814,
0 -10px 10px rgba(255, 255, 255, 0.4);
box-shadow:
0 10px 10px #643814,
0 -10px 10px rgba(255, 255, 255, 0.4);
}
#psdfreemium #psdf-f #psdf-block #psdf-left #psdf-inl{
margin:0 0 0 -15px;
float:left;
width:15px;
height:35px;
background:#e2e3e4;
}
#psdfreemium #psdf-f #psdf-block #psdf-right{
margin:110px 0 0 50px;
float:left;
width:0;
height:0;
width:65px;
height:35px!important;
background:#e2e3e4;
-moz-box-shadow:
0 10px 10px #2c576e,
0 -10px 10px rgba(255, 255, 255, 0.4);
-webkit-box-shadow:
0 10px 10px #2c576e,
0 -10px 10px rgba(255, 255, 255, 0.4);
box-shadow:
0 10px 10px #2c576e,
0 -10px 10px rgba(255, 255, 255, 0.4);
}
#psdfreemium #psdf-f #psdf-block #psdf-right #psdf-inr{
margin:0 -30px 0 0;
float:right;
width:15px;
height:35px;
background:#e2e3e4;
outline:15px solid #e2e3e4;
}
#psdfreemium #psdf-f #psdf-block #psdf-bottom{
margin:-55px 0 0 0;
float:left;
width:0;
height:0;
width:50px;
height:70px;
background:#e2e3e4;
}
</style>
</head>
<body>
<div id='psdfreemium-wrap'>
<div id='psdf-v'></div>
<div id='psdf-htop'></div>
<div id='psdfreemium'>
<div id='psdf-p'>
<div id='psdf-inp'></div>
</div>
<div id='psdf-f'>
<div id='psdf-in'>
</div>
<div id='psdf-block'>
<div id='psdf-left'><div id='psdf-inl'></div></div>
<div id='psdf-right'><div id='psdf-inr'></div></div>
<div style='clear:both;'></div>
<div id='psdf-bottom'></div>
</div>
</div>
</div>
<div style='clear:both;'></div>
<div id='psdf-hbottom'></div>
<div style='clear:both;'></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> and original image by <a style='text-decoration:none;color:#22d;' href='http://www.psdfreemium.com' target='blank' title='psd freemium'>psdfreemium.com</a></span>
<!-- regards
http://www.indaam.com -->
</body>
</html>
cara menjalankan source code(html css) logo psdfreemium.com-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
Terima kasih. Menarik sekali.
Wah dengan CSS loadnya bisa lebih ringan daripada image ya mas? ternyata kode nya panjang juga ya….
Tergantung. Hitung berapa jumlah bytenya. Lalu bandingkan. kalau jumlah byte gambar biasa lebih besar, berarti load gambar lebih berat. kalau sebaliknya, load teks lebih berat.
penggunaan css3 juga mengurang request ke server, jadi sedikit heman bandwidth
bisa diminimalize, tapi tampilanya juga jadi jelek nanti
thanks gan… good nech sharenya….