Heute habe ich angefangen, mich mit CSS3 zu beschäftigen und dabei gerlernt, wie man einen kleinen Android designt. Er scheint recht gut drauf zu sein und man kann ihn sogar kitzeln
Sollte in allen aktuellen Versionen der verbreiteten Browser funktionieren.
Selber ausprobieren
Im Folgenden beschreibe ich, wie ihr selbst einen Android bauen könnt. Es ist nicht sehr schwer
Bevor wir anfangen, müssen wir aber erst noch die Android-Farbe raussuchen: #A4C739
Zunächst wollen wir einen Android bauen, der nicht animiert ist. Wir nehmen dazu an, dass der Android in einem festgelegten Bereich mit absoluten Koordinaten positioniert wird.
Als Basis dient uns das Folgende:
.droid { position: absolute; bottom: 30px; right: 60px; height: 60px; width: 65px; }
Nun folgt der Android:
.droid .torso { position: absolute; background: #A4C739; width: 65px; height: 60px; border-radius: 0px 0px 10px 10px; } .droid .head { position: absolute; top: -32px; background: #A4C739; width: 65px; height: 30px; border-radius: 65px 65px 0% 0%; } .droid .head .eye { height: 5px; width: 5px; border-radius: 5px; background: #333; position: absolute; top: 12px; } .droid .head .eye:nth-child(1) { left: 20px; } .droid .head .eye:nth-child(2) { right: 20px; } .droid .head .ear { height: 15px; width: 3px; border-radius: 15px; background: #A5C63B; position: absolute; top: -10px; } .droid .head .ear:nth-child(3) { left: 15px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); } .droid .head .ear:nth-child(4) { right: 15px; transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); } .droid .leg { position: absolute; bottom: -27px; background: #A5C63B; width: 15px; height: 27px; border-radius: 0px 0px 30px 30px; } .droid .leg:nth-child(3) { left: 12px; } .droid .leg:nth-child(4) { right: 12px; } .droid .arm1, .droid .arm2 { left:68px; top:-3px; width: 15px; height: 40px; background: #A5C63B; position: absolute; border-radius: 25px; } .droid .arm1 { left:-18px; transform-origin: 54% 18%; -webkit-transform-origin: 54% 18%; -moz-transform-origin: 54% 18%; -o-transform-origin: 54% 18%; }