Home » » Membuat Logo Android dengan CSS 3

Membuat Logo Android dengan CSS 3

Posted by Hero Posted on 10:04 PM with 9 comments
logo android, cara membuat logo android, membuat logo android dengan css
Membuat logo dengan Photoshop atau dengan Corel Draw masih Umum. Tetapi Dalam tutorial kali ini kita akan membuat Logo Android dengan CSS3.

Keren bukan ???

Biasanya kita cuman memakai CSS untuk desain Website tetapi dalam tutorial ini kita memakainya untuk mendesai Logo.

Penasaran ???
Bagi yang penasaran silahkan simak baik-baik ^__^

Pertama buat file phpnya kemudian tulis source codenya sesuai seperti ini ::
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="android">
 <div class="head">
  <div class="l_ant"></div>
  <div class="r_ant"></div>
  <div class="l_eye"></div>
  <div class="r_eye"></div>
 </div>
 <div class="body">
  <div class="l_arm"></div>
  <div class="r_arm"></div>
  <div class="l_leg"></div>
  <div class="r_leg"></div>
 </div>
</div>
</body>
</html>

kedua buat file cssnya ::
 
   div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
 height: 404px; width: 334px;
 margin: 100px auto;
 
}
.head{
 width: 220px; height: 100px;
 top: 32px;
 
 border-radius: 110px 110px 0 0;
 -moz-border-radius: 110px 110px 0 0;
 -webkit-border-radius: 110px 110px 0 0;
 
 -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
 background: #fff;
 width: 20px; height: 20px;
 position: absolute; top: 42px;
 
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
 width: 6px; height: 50px;
 position: absolute; top: -34px;
 
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.l_ant {
 left: 50px;
 transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 -moz-transform: rotate(-30deg);
}
.r_ant {
 right: 50px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
}

.body{
 width: 220px; height: 184px;
 top: 40px;
 
 border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
 width: 50px; position: absolute;
 -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
 height: 150px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
 height: 80px; top: 182px;
 border-radius: 0 0 25px 25px;
 -moz-border-radius: 0 0 25px 25px;
 -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
 -webkit-transform: rotate(-5deg) translate(-4px, -8px);
 -transform: rotate(-5deg) translate(-4px, -8px);
 -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
 -webkit-transform: rotate(15deg) translate(-14px, 0);
 -transform: rotate(15deg) translate(-14px, 0);
 -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
 -webkit-transform: rotate(-30deg) translate(30px, 0);
 -transform: rotate(-30deg) translate(30px, 0);
 -moz-transform: rotate(-30deg) translate(30px, 0);
}

Selesai.
Untuk priviewnya bisa kalian coba sendiri.
Semoga artikel ini bermanfaat buat kalian

Salam Hangat


Roy Purbo
 
Labels:

9 comments:

  1. Mozmee007December 25, 2017 at 1:50 PM

    Android is very good, does not twitch.

    แทงบอล sbobet
    sbobet mobile
    รับแทงบอล

    ReplyDelete
  2. AnonymousJanuary 7, 2018 at 1:14 PM

    Thanks for a great article and I look forward to reading it again
    maxbet

    แทงบอล maxbet

    แทงบอล maxbet

    ReplyDelete
  3. UnknownSeptember 3, 2018 at 12:35 PM

    This comment has been removed by the author.

    ReplyDelete
  4. thanidaNovember 22, 2018 at 12:06 PM

    This is really a remarkable topic close to my heart thanks. Keep up the good working!
    ไฮโล

    ReplyDelete
  5. Mellysa ingDecember 17, 2018 at 7:55 AM

    Zune and iPod: Most people compare the Zune to the Touch, but after seeing how slim and surprisingly small and light it is, I consider it to be a rather unique hybrid that combines qualities of both the Touch and the Nano.
    Daftar Togel Resmi

    ReplyDelete
  6. supersonic100g9April 25, 2019 at 10:16 AM

    เช่ารถเก๋ง ทาง BANANA rent-a-car เรามีบริการเช่ารถเก๋งทั้งแบบ เช่าขับเอง และ เช่าพร้อมคนขับ รถยนต์ที่เราให้บริการนั้น เป็นรถยนต์ที่มีคุณภาพ สะอาด ปลอดภัย รถยนต์ทุกคันได้รับการดูแล ผ่านการบำรุงรักษาตามระยะอย่างดี อีกทั้งเรามีประกันภัยชั้น 1 ที่มาพร้อมกับเช่ารถเก๋งทุกคัน คุณจึงมั่นใจได้ในทุกการขับขี่ ในด้านการบริการหลังการขาย หากรถเช่าของเรามีปัญหาหรือขัดข้องระหว่างการใช้งาน เรามีบริการ Call center 24 ชั่วโมง ทำให้คุณมั่นใจได้ว่าตลอดการเช่านั้น เราจะไม่ละทิ้งลูกค้าอย่างแน่นอน และจุดเด่นที่สำคัญของเรา คือ ไม่มีบัตรเครดิตก็สามารถเช่ารถได้ จึงทำให้เรามีฐานลูกค้าอยู่มากกว่า 40,000 คน และด้วยการบริการที่ได้มาตรฐานของเรา ทำให้ลูกค้ามีความเชื่อมั่นที่จะกลับมาใช้บริการซ้ำเป็นครั้งที่ 2
    เช่ารถ
    เช่ารถกรุงเทพ
    เช่ารถราคาถูก
    เช่ารถรายเดือน
    เช่ารถขับเอง

    ReplyDelete
  7. amulet88January 16, 2020 at 12:45 PM

    คลิปหลุดน้องจูน ข่าวกีฬาวันนี้

    ReplyDelete
  8. PornhubJanuary 20, 2020 at 5:56 PM

    This comment has been removed by a blog administrator.

    ReplyDelete
  9. Master BlogersMarch 4, 2020 at 6:47 AM

    This comment has been removed by a blog administrator.

    ReplyDelete