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.com" name="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
*/
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.com' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regards
http://www.indaam.com -->
</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.

shared to : facebook | twitter

tentang penulis

indamindam

Indam, seorang web designer, wordpress theme development, -
blogger dan penulis yang ingin terus belajar! read more about indam ⇉


Indam on | facebook | twitter

Related post

Berlangganan via FeedBurner

6 Responses to “Bikin Sampoerna a mild Logo dengan CSS3”

  1. ada-akbar.com says:
    November 6, 2011 at 7:21 pm

    Keren. .pake css. . sangar :matabelo

    Reply
  2. Jaka says:
    November 12, 2011 at 11:58 am

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

    Reply
  3. Jeprie says:
    December 3, 2011 at 11:10 am

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

    Reply
  4. Indaam says:
    December 8, 2011 at 4:00 pm

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

    Reply
  5. TMag says:
    January 21, 2012 at 9:23 pm

    Logonya keren banget.

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

    Reply

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>