Lustiger Android

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%;
}
Zuletzt geändert: 20. November 2013 um 14:54 Uhr.

Geschrieben von .

a.k.a.

Ich bin Diplom-Informatiker, den es von Herten im wunderschönen Ruhrgebiet nach Berlin verschlagen hat. An der TU Berlin forsche ich nun als wissenschaftlicher Mitarbeiter in der kombinatorischen Optimierung an Graphalgorithmen; nebenbei bringe ich Anfängern Programmieren bei. Ich blogge hier über alles was mich interessiert, vor allem Nerdiges und Reisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

O:-) B-) :cry: :-* :D :-o :P ;) :O :-/ more »