logo Android Honeycomb ini dibuat dengan pure css level 3 dan tanpa image sama sekali serta tidak menggunakan photoshop
●
●
▼
Android CSS Logo
Honeycomb Edition
Created with real pure CSS level 3 (no images) without photoshop.
updated by taufanKode css selengkapnya adalah seperti dibawah ini:
#box { width:400px; margin:auto; position:relative; top:40px; left:-20px; z-index:299; height:1px; } #cab { width:162px; height:66px; border-radius:6em 6em 0 0; -moz-border-radius:7em 7em 0 0; -webkit-border-radius:6em 6em 0 0; position:relative; top:8px; } #cue { width:162px; height:180px; border-radius:0 0 4em 4em; -moz-border-radius:0 0 4em 4em; -webkit-border-radius:0 0 4em 4em; position:relative; } #ala1izq, #ala1der, #ala2izq, #ala2der { position:relative; background:#a7a1e0; border:4px solid #4d9de3; width:150px; height:67px; opacity:0.5; border-radius:6em; -moz-border-radius:6em; -webkit-border-radius:6em; z-index:-1; } #ala1izq { top:-188px; left:-120px } #ala1der { top:-318px; left:140px; } #ala2izq { transform:rotate(-45deg); -o-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform: rotate(-45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45); } #ala2der { transform:rotate(45deg); -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform: rotate(45deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=45); } #ala2izq { height:47px; top:-240px; left:-87px; z-index:-20 } #ala2der { height:47px; top:-370px; left:107px; z-index:-20 } #aguijon { position:relative; font-size:5em; left:50px; top:-290px; color:#4d9de3; z-index:-1; width:100px; } .a { background:#000; border:8px solid #5abcec; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; } .b, .c, .d { background:#5abcec; height:32px; background: -moz-linear-gradient(0deg, #5abcec, #004d81, #5abcec); background: #5abcec -webkit-gradient(linear, right top, left top, from(#5abcec), color-stop(0.5,#004d81), to(#5abcec)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#004d81', EndColorStr='#5abcec'); } .c { position:relative; top:30px; } .d { position:relative; top:60px; } .ojo { position:relative; font-size:2.6em; color:#5abcec; top:5px } #ojoizq { left:-5px } #ojoder { left:40px } #antenaizq, #antenader { width:5px; height:35px; background:#000; border:8px solid #5abcec; float:left; top:-15px; position:relative; } #antenaizq { left:34px; transform:rotate(-35deg); -o-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -webkit-transform: rotate(-35deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-35); } #antenader { left:94px; transform:rotate(35deg); -o-transform:rotate(35deg); -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=35); } .reset {clear:both} #text { font-family:Segoe UI; background:#000; position:relative; float:right; width:255px; padding:5px 25px 5px 25px; margin:2em; top:216px; } #text h1 { font-size:x-large; margin:0.3em 0 0 0 } #text a { color:#97c03e } #text a.tw { color:#5dd8e7!important } #text a:hover { color:#FF0000!important } #text #small { font-size:small; color:#888 }
kode html nya sebagai berikut:
<div id="box">
<span id="antenaizq" class="a"></span>
<span id="antenader" class="a"></span>
<div id="cab" class="a">
<span id="ojoizq" class="ojo">●</span>
<span id="ojoder" class="ojo">●</span>
</div>
<div id="cue" class="a">
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div id="ala1izq"></div>
<div id="ala2izq"></div>
<div id="ala1der"></div>
<div id="ala2der"></div>
<div id="aguijon">▼</div>
</div>