css | nerdpause

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%;
}

nerdpause

Was tut ein Nerd in der Pause? (Und auch sonst!)

Schlagwort-Archive: css

Lustiger Android

Selber ausprobieren