Bikin Sampoerna a mild Logo dengan CSS3

Tulisan ini hanya sharing tentang logo sampoerna yang dibuat dengan CSS3

Do not condemn the judgment of another because it differs from your own. You may both be wrong. Dandemis

Tulisan ini hanya sharing tentang logo sampoerna yang dibuat dengan CSS3

Last Modif at November 4th, 2011

Kemarin, pas penyakit leha-lehaan ku kambuh, aku malas banget melakukan sesuatu yang berhubungan dengan tekanan, apa itu? Yups nyelesaiin job :D, ngga tahu kenapa pokoknya malas dan malas, ya mungkin kerena capek kali yah. Dan, ketika lagi berbaring, ada sesuatu yang menarik dipandangan saya, apa itu? Bungkus rokok sampoerna :D sekilas saya perhatikan, dan dibagian tengahnya ada logo yang unik, diperhatikan secara detail, kayaknya bisa dibuat dengan CSS3. Nyalain laptop, mulai dah menggambar dengan CSS3.

Berikut adalah hasil logo sampoerna a mild dengan css3(silakan disable load images pada browser)
       

Dan berikut adalah source kodenya;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sampoerna Logo Dengan CSS3</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<meta http-equiv="refresh" content="120;url=http://www.indaam.net"/>
<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
*/
html{padding:100px 0
}#sampoerna{
margin:0 auto;
background:rgb(242, 227, 26);
padding:10px;
width:304px;
border:2px solid #333;
display:block;
}
#sampoerna span{
display:block
}
#sampoerna:after{
clear:both;
content:'';
display:block;
}
.sampoerna{
width:300px;
height:310px;
overflow:hidden;
background:rgb(218, 37, 29);
border:2px solid #333;
}
.elemen1{
float:left;
width:300px;
height:310px;
}
.elemen2,
.elemen3,
.elemen4,
.elemen5,
.elemen6,
.elemen7{
float:left;
width:300px;
height:310px;
margin:-310px 0 0 0;
}
.elemen1:before{
content:'';
float:left;
width:185px;
height:180px;
background:white;
margin:12px 0 0 20px;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}
.elemen1:after{
content:'';
float:left;
width:120px;
height:118px;
background:rgb(218, 37, 29);
margin:-137px 0 0 39px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.elemen2 .elemen2a{
float:left;
width:102px;
height:100px;
background:white;
margin:70px 0 0 60px;
overflow:hidden;
border-radius:127px 145px 0 80px;
-moz-border-radius:127px 145px 0 80px;
-webkit-border-radius:127px 145px 0 80px;
-o-border-radius:127px 145px 0 80px;

}
.elemen2 .elemen2a:before{
content:'';
float:left;
width:120px;
height:118px;
background:rgb(218, 37, 29);
margin:20px 0 0 -52px;
border-radius:140px 100px 0 0;
-webkit-border-radius:140px 100px 0 0;
-moz-border-radius:140px 100px 0 0;
}
.elemen3 .elemen3a{
float:left;
width:300px;
height:310px;
margin:120px 0 0 65px;
background:rgb(218, 37, 29);
-moz-transform:rotate(30.7deg);
-webkit-transform:rotate(30.7deg);
-o-transform:rotate(30.7deg);
-ms-transform:rotate(30.7deg);
transform:rotate(30.7deg);
}
.elemen3 .elemen3a:before{
content:'';
width:15px;
height:230px;
float:left;
background:white;
}
.elemen3 .elemen3a:after{
content:'';
width:80px;
height:28px;
float:left;
background:white;
margin:90px 0 0 -13px;
-moz-transform:rotate(-30.7deg);
-webkit-transform:rotate(-30.7deg);
-o-transform:rotate(-30.7deg);
-ms-transform:rotate(-30.7deg);
transform:rotate(-30.7deg);
}
.elemen4:before{
content:'';
float:left;
width:97px;
height:97px;
background:white;
margin:25px 0 0 179px;
border-radius:95px 95px 0 100px;
-webkit-border-radius:95px 95px 0 100px;
-moz-border-radius:95px 95px 0 100px;
}
.elemen4:after{
content:'';
float:left;
width:90px;
height:90px;
background:rgb(218, 37, 29);
margin:-74px 0 0 209px;
border-radius:95px 95px 0 0;
-webkit-border-radius:95px 95px 0 0;
-moz-border-radius:95px 95px 0 0;
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-ms-transform:rotate(-6deg);
transform:rotate(-6deg);
}
.elemen5:before{
content:'';
float:left;
width:40px;
height:190px;
background:white;
margin:70px 0 0 184px;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
transform:rotate(-7deg);
}
.elemen5:after{
content:'';
float:left;
width:38px;
height:45px;
background:white;
margin:-22px 0 0 206px;
-moz-transform:rotate(-52deg);
-webkit-transform:rotate(-52deg);
-o-transform:rotate(-52deg);
-ms-transform:rotate(-52deg);
transform:rotate(-52deg);
}
.elemen6:before{
content:'';
float:left;
width:28px;
height:40px;
background:white;
margin:256px 0 0 47px;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
-mz-transform:rotate(-7deg);
transform:rotate(-7deg);
border-radius:95px 95px 100px 100px;
-moz-border-radius:95px 95px 100px 100px;
-webkit-border-radius:95px 95px 100px 100px;
}
.elemen6:after{
content:'';
float:left;
width:80px;
height:40px;
background:white;
margin:226px 0 0 0;
-moz-transform:rotate(40deg);
-o-transform:rotate(40deg);
-webkit-transform:rotate(40deg);
-ms-transform:rotate(40deg);
transform:rotate(40deg);
}
.elemen7:before{
content:'';
float:left;
width:20px;
height:85px;
background:white;
margin:213px 0 0 153px;
-moz-transform:rotate(55deg);
-webkit-transform:rotate(55deg);
-o-transform:rotate(55deg);
-ms-transform:rotate(55deg);
transform:rotate(55deg);
}
.elemen7:after{
content:'';
float:left;
width:17px;
height:55px;
background:white;
margin:-59px 0 0 240px;
-moz-transform:rotate(55deg);
-o-transform:rotate(55deg);
-webkit-transform:rotate(55deg);
-ms-transform:rotate(55deg);
transform:rotate(55deg);
}

#sampoerna:hover{
background:#fff;
border-color:rgb(218, 37, 29);
}.sampoerna:hover{
background:#fff;
border-color:rgb(218, 37, 29);
}
.sampoerna:hover .elemen2 span,
.sampoerna:hover .elemen3 span:before,
.sampoerna:hover .elemen3 span:after,
.sampoerna:hover span:before,
.sampoerna:hover span:after{
background:rgb(218, 37, 29);
}
.sampoerna:hover .elemen1:after,
.sampoerna:hover .elemen3 .elemen3a,
.sampoerna:hover .elemen2 .elemen2a:before,
.sampoerna:hover .elemen4:after{
background:#fff;
}
</style>
</head>
<body>
<span id='sampoerna'>
<span class='sampoerna'>
<span class='elemen1'>&nbsp;</span>
<span class='elemen2'>
<span class='elemen2a'>&nbsp;</span>
</span>
<span class='elemen3'>
<span class='elemen3a'>&nbsp;</span>
</span>
<span class='elemen4'>&nbsp;</span>
<span class='elemen5'>&nbsp;</span>
<span class='elemen6'>&nbsp;</span>
<span class='elemen7'>&nbsp;</span>
</span><!-- End #sampoerna-->
</span><!-- End .sampoerna -->
<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></span>
<!-- regards
http://www.indaam.net -->
</body>
</html>

Keterangan;
Saya sudah menguji, logo diatas dengan 3 browser yang support CSS3, fireox 4, chrome, opera 10.10 dan sayangnya masih ada beberapa bug, terutama di opera. Untuk firefox dan chrome, hasilnya udah lumanyan, dan mungkin yang perlu dirapikan hanya dibagian kaki kiri dan telor bagian kiri atas “coba lihat efek border radiusnya” seperti terpotong kan?
Mmm, ngomongin rokok, sampoerna ini adalah rokok terbaik yang pernah saya cicipi sekalikus sesuatu yang menemani saya ketika berimajinasi, aromanya bener-bener dah, ngga bisa digambarkan dengan kata-kata. Pokoknya makyus minta ampun. Sayangnya, rokok ini mungkin sudah habisin duit yang jumlahnya bisa dikatan ngga sedikit, mungkin sudah belasan juta duitku dikuras sama rokok ini, dan yang tidak kalah mengkwatirkan adalah, penyakit yang dibuat oleh rokok ini!

Caution!
Merokok pasti akan membunuhmu!!!!

Sudah tau gituh, masih aja ngerokok, payah memang aku ini.

Logo sampoerna ini adalah logo ke 14 yang saya buat dengan CSS3, sebelumnya saya sudah membuat ini;

Well, ini hanya untuk melatih kemampuan CSS saja, dan satu yang semakin aku sadari, CSS itu jauh lebih kompleks.

Indam

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

11 thoughts on “Bikin Sampoerna a mild Logo dengan CSS3”

  1. Keren. .pake css. . sangar :matabelo

  2. Jaka says:

    mantap :)
    tapi terlalu menoton karna tidak ada efek gradientnya..

    1. indam says:

      Logonya memang ngga pake gradient :)

  3. Jeprie says:

    Garis stroke 1 px tipis masih terlihat di sini, Chrome.

  4. Indaam says:

    Kang Jeprie,
    Itu dia bugnya–bukan hanya di chrome, fx juga. mungkin nantinya akan diperbaiki…

  5. TMag says:

    Logonya keren banget.

    tapi kayaknya huruf A itu pakai “old english text mt”, sekali tebas selesai.

  6. Wah, luar biasa. Ehm… menyinggung komentar @TMAG, masuk akal juga ya haha… tapi jadinya kan tidak mengesankan kalo gitu :p

  7. iman says:

    Mas Keren abizzzzzzzzzzzzzzzzzzzzzzz jadi pengen belajar css….
    tapi logonya di IE q ancur…. hehe
    atau emang setiap koding di setiap browser berbeda yah???

  8. wazenk says:

    Keren nie…
    ane mo edit” yahh gan… :)

  9. Woooow keren B-) B-) Sepertinya agan memang jago buat logo, jadi ngiri ogut heee.eee :) Mungkin suatu saat mau belajar gimana cara bikin logo juga aahh… ;)

  10. dewa says:

    Gan gmn seh bisa semahir itu CSS nya…belajar awalnya gmna seh..jadi ngiri ane….ane juga mau memperdalam dunia pemograman tapi sekarang masih newbie maksudnya baru belajar lah gitu tepatnya…ane perhatiin setiap googing atau beberapa site ane temuin begitu banyak tutorial. Terus ane berpikir gimana tu orang bisa bikin ini itu dengan mudahnya..seolah2 sudah tergambar di pikirannya apa langkah A sampai Z untuk membuat sesuatu gitu…..ibarat kita mau membuat pesawat mainan dari kertas..lipat gini gitu jadi dah………but trims gan atas sharing ilmunya di site indaam ini..amazing…well…sekali lagi ya gan saran jadi seprti agan itu heheheh…minta ilmunya gk pa2 kan sekalian dpt amal heheheh (rayu dot com) have a nice day

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

+
-