Icon/Logo Desaindigital.com with CSS3 and HTML

Logo desaindigital[dot]com ini adalah satu dari beberapa logo yang saya buat dengan CSS3 dan html, beberapa waktu yang lalu saya sudah membuat logo berikut

Do not confuse your vested interests with ethics. Do not identify the enemies of your privilege with the enemies of humanity. Max Lerne

Logo desaindigital[dot]com ini adalah satu dari beberapa logo yang saya buat dengan CSS3 dan html, beberapa waktu yang lalu saya sudah membuat logo berikut

Last Modif at July 8th, 2011

Sebelumnya, buat yang ingin belajar photoshop silakan mampir ke desaindigital.com, banyak tutorial photoshop yang bermanfaat dan menarik disana, saja jamin sobat ngga akan menyesal :) .

Next, icon atau logo desaindigital.com ini adalah logo ke-10 yang saya buat dengan CSS3 dan html, dulunya saya sudah membuat ini;

kenapa saya membuat logo desaindigital.com?

bisa dikatakan saya adalah salah satu visitor setia desaindigital.com, banyak tutorial photoshop yang saya butuhkan disana, saya yakin sobat juga mengatakan kalau desaindigital.com adalah blog yang menyediakan content bermutu.

ketika saya perhatikan logonya, sepertinya unik(menurut saya) karena keunikan itu, sayapun memperhatikan logo itu secara detail, setelah saya perhatikan, wah ‘sepertinya logo ini bisa dibuat dgn CSS3, akhirnya sayapun membuat logo yang sama versi CSS3-nya

apakah ada permit dari admin desaindigital.com

nggak ada, saya ngga meminta ijin kepada sang admin, saya sudah pernah dicuekin via twitter, pernah juga saya komentar di blognya tapi adminya ngga berkunjung balik ke blog cupuku ini(silakan cek via komentar) ‘pasti ngga ada’.

kalau mas jepri marah gimana?

Mas Jepri adalah admin dari desaindigital.com dan jika yang bersangkutan ngga terima dengan perbuatan saya(membuat logo versi css3-nya), SAYA AKAN HAPUS POSTINGAN INI DAN MENGGANGGAP SAYA ngga PERNAH BERBUAT INI. semoga aja mas jepri ngga marah, #takut.

preview

NOTE,
Dont view if you IE(saya jamin ngga ada samanya), rekomendasi gunakan firefox, opera atau chrome(tidak direkomendasikan), saya rasa ada bug di webkit untuk box-shadow inset.

source code(css html) logo/icon desaindigital.com

<html>
<head>
<title>Desaindigital.com icon/logo with css3</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta content="http://www.desaindigital.com/" name="original image"/>
<meta content="http://www.desaindigital.com/about" name="original author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<head>
<style type="text/css">
/*
CSS LOGO CREATED BY,
name : indam
website : http://www.indaam.net
facebook : http://facebook.com/indaam
twitter : http://twitter.com/indaam
email : indaam[at]gmail.com
*/
.logodd{
margin:0 auto;
background:white;
padding:100px;
max-width:500px;
border-radius:5%;
-moz-border-radius:5%;
-webkit-border-radius:5%;
}
.dd{
overflow:hidden;
background:rgba(242, 096, 016, 0.9);
margin:0 auto;
width:300px;
height:300px;
-moz-box-shadow:inset -2px 6px 6px #222;
-webkit-box-shadow:inset -2px 6px 6px #222;
box-shadow:inset -2px 6px 6px #222;
}
.pembentuk-d-besar{
float:left;
width:190px;
height:300px;
background:white;
-moz-border-radius-topright:110px 140px;
-webkit-border-top-right-radius:110px 140px;
border-top-right-radius:110px 140px;
-moz-border-radius-bottomright:110px 140px;
-webkit-border-bottom-right-radius:110px 140px;
border-bottom-right-radius:110px 140px;
-moz-box-shadow:0 5px 6px #222;
-webkit-box-shadow:0 5px 6px #222;
box-shadow:0 5px 6px #222;
}
.pembentuk-d-besar .d{
float:left;
background:#db0004;
height:230px;
width:140px;
margin:35px 0 0 0;
-moz-box-shadow:inset -2px 5px 4px #222, inset 2px 0 3px #222, inset -5px 0 44px rgba(100%, 100%, 100%, 0.5);
/* -webkit-box-shadow:inset -2px 5px 4px #222, inset 2px 0 3px #222, inset -5px 0 44px rgba(100%, 100%, 100%, 0.5); */
box-shadow:inset -2px 5px 4px #222, inset 2px 0 3px #222, inset -5px 0 44px rgba(100%, 100%, 100%, 0.5);
-moz-border-radius-topright:85px 110px;
-webkit-border-top-right-radius:85px 110px;
border-top-right-radius:85px 110px;
-moz-border-radius-bottomright:85px 110px;
-webkit-border-bottom-right-radius:85px 110px;
border-bottom-right-radius:85px 110px;
}
.pembentuk-d-kecil{
float:left;
margin:100px 0 0 0;
width:110px;
height:200px;
}
.pembentuk-d-kecil .lingkaran{
position:reletive;
float:left;
margin:-30px 0 0 -30px;
width:145px;
height:234px;
background:white;
-moz-box-shadow:0 2px 0 #222;
-webkit-box-shadow:0 2px 0 #222;
box-shadow:0 2px 0 #222;
-moz-border-radius:70px;
-webkit-border-radius:70px;
border-radius:70px;
-moz-border-radius-bottomleft:70px 55px;
-webkit-border-bottom-left-radius:70px 55px;
border-bottom-left-radius:70px 55px;
-moz-border-radius-topleft:70px 55px;
-webkit-border-top-left-radius:70px 55px;
border-top-left-radius:70px 55px;
}
.pembentuk-d-kecil .lingkaran .lingkaran-kecil{
margin:40px 0 0 30px;
background:rgb(0,106,151 );
float:left;
width:110px;
height:150px;
border-radius:70px/90px;
-moz-border-radius:70px/90px;
-webkit-border-radius:70px/90px;
-moz-box-shadow:inset 0 3px 4px #222, inset 0 5px 33px rgba(225, 225, 225, 0.5);
/* -webkit-box-shadow:inset 0 3px 4px #222, inset 0 5px 33px rgba(225, 225, 225, 0.5); */
box-shadow:inset 0 3px 4px #222, inset 0 5px 33px rgba(225, 225, 225, 0.5);
}
</style>
</head>
<body>
<div class='logodd'>
<div class='dd'>
<div class='pembentuk-d-besar'>
<div class='d'></div>
</div>
<div class='pembentuk-d-kecil'>
<div class='lingkaran'>
<div class='lingkaran-kecil'></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.indaam.net' target='blank' title='Indam Site'>Indam Site</a> and original image by <a style='text-decoration:none;color:#22d;' href='http://www.desaindigital.com' target='blank' title='desain digital'>desaindigital.com</a></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

cara menjalankan source code(html css) Desaindigital.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

Tingkat kemiripan

walaupun logo desaindigital.com ini ngga sulit dibuat css dan htmlnya, namun hasil preview atau hasil coding sangat berbeda jauh dengan logo asli.

terdapat banyak ketidak samaan dengan logo asli, warna background logo asli desaindigital.com pembentuk D dan d-nya adalah transparent, sedangkan hasil yang saya buat dengan CSS3 ini menggunakan warna putih, hampir mustahil jika kita menggunkan transparent, kecuali kita mambuat css speri ini

.misal{
float:left;
background:transparent;
width:0.5px;/*atau lebik kecil*/
height:0.5px;/*atau lebih kecil*/
}

Ada juga di bagian d(kecilnya) tepatnya di kiri-bawah lengkunganya tidak sama dengan yang asli, masalah ini terjadi karena penggunaan box-shadow, makanya shadow pada d(kecil) tidak saya blur.

oklah, sekian sharing kali ini. sekali lagi, ini saya buat hanya untuk melatih kemampuan css saja.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

4 thoughts on “Icon/Logo Desaindigital.com with CSS3 and HTML”

  1. Jeprie says:

    Ternyata bisa dibuat hanya di CSS3 ya. Sebetulnya warna logo itu ada sedikit gradasi. Lubang di D besar dan d kecil juga memiliki inner shadow. Arah sumber cahaya dari 90 derajat. Kalau di sini sumber cahayanya ada di kanan atas.

    Untuk referensi silakan dilihat juga file PSDnya http://dl.dropbox.com/u/7116487/work-temporer/logo.zip.

    Terima kasih postingnya. Menambah pengetahuan baru buat saya.

    1. indam says:

      maaf baru di reply, abisnya komentarnya nyasar ke spam. untung saja saya tidak langsung emty spam.
      ia. logo itu hanya dibuat dengan css3, saya masih melatih kemampuan css3 saya, mungkin nanti akan lebih mirop :)
      ia mas, sama-sama :)

  2. Jeprie says:

    Saya coba di Firefox sekarang ternyata sangat mirip ya. Tadi saya coba di Chrome ada beberapa shadow yang hilang.

  3. david says:

    bagus ya mas tampilan dan isi nya
    buat nya pake cms atau dari dreamweaper mas

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-