Wer bei mir öfter vorbeischaut weiß, dass ich unheimlich viel Spaß am Webdesign habe. Wenn ich mal etwas Zeit finde, bastele ich und probiere mit den Möglichkeiten von CSS herum. Und manchmal, mit ein wenig Glück, kommt sogar etwas ganz ansehnliches dabei raus: ein Mockup des Google Nexus 7 Modell 2013:

See the Pen Nexus 7 (2013) Mockup (Portrait) by Oliver (@reap705) on CodePen.

Und da habe ich mir gedacht, dass man daraus ein schönes Tutorial machen kann. Habt Ihr Lust das Nexus 7 mit CSS-Code nachzubauen? Prima. Fangen wir gleich an.

Der HTML-Quellcode

Der Quellcode ist recht überschaubar. Wir benötigen zunächst ein figure-Struktur-Element, da es sich bei unserem Mockup und dessen Inhalt um einen Medieninhalt handelt.

Das Nexus 7 ist nicht besonders schwer nachzubauen. Wir benötigen lediglich das Gehäuse (case), eine Kamera-Linse (camera), das Display (glass) sowie eine Benachrichtungs-LED (led).

Fertig ist der Quellcode:

<figure class="nexus7">
  <div class="case">
    <div class="camera"></div>
    <div class="glass"></div>
    <div class="led"></div>
  </div>
</figure>

Stylesheet

Beginnen wir mit dem Gehäuse.

.case {
  position: relative;
  width: 390px;
  height: 700px;
  margin: 80px auto;
  background: linear-gradient(to right, rgba(24,24,24,1) 0%,rgba(0,0,0,1) 100%);
  border-radius: 20px;
  border: 2px solid #000;
  box-shadow: 0 0 2px 2px #5a5a5a, 0 0 2px 2px #555, 0 0 2px 2px #6a6a6a, 0 0 2px 2px #666,0 0 2px 2px #7a7a7a, 0 0 2px 2px #777, 0 0 2px 2px #8a8a8a, 0 0 2px 2px #888, 0 0 0 5px rgba(0,0,0,0.6), 0 40px 30px -15px rgba(0,0,0,0.6);
}

Das Gehäuse bekommt die Abmessung 390 x 700 Pixel und abgeschrägte Ecken (border-radius). Als Hintergrund (background) nutzen wir einen sehr dunklen horizontalen Hintergrundfarbverlauf, der von rechts nach links geringfügig heller wird.

Um die von der Vorderseite etwas abgesetzte Rückseite zu simulieren, nutzen wir mehrere Schlagschatten (box-shadow), die von innen nach außen immer dunkler werden. Um diesen Effekt noch zu unterstützen erhält das Gehäuse noch eine schwarze Rahmenlinie mit einer Breite von 2 Pixeln.

Kommen wir zum Display:

.glass {
  position: absolute;
  left: 7%;
  top: 11%;
  width: 86%;
  height: 78%;
  background: url(http://www.olivergast.de/wp-content/img/nexus7-bg.jpg) no-repeat center/cover;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.7);
}

Wir positionieren das Display absolut und zentrieren es innerhalb des Gehäuses, indem wir die Positionsangaben left und top mit der Hälfte der verbleibenden Breite und Höhe setzen (Breite 86% + Abstand links 7% + Abstand rechts 7% sowie Höhe 78 % + Abstand oben 11% + Abstand unten 11%). Um das Display vom Gehäuse noch etwas abzusetzen, gibt es noch einen dezenten Innenschatten.

Als Hintergrund habe ich ein Bild von meinem Webspace eingebunden. Und hier wird es interessant. Aber dazu später mehr.

Nächstes Objekt ist die Kamera-Linse:

.camera {
  position: absolute;
  top: 45px;
  right: 100px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  box-shadow: inset -1px -1px 5px rgba(72,72,72,0.9);
}

Die Linse positionieren wir ebenfalls absolut rechts oben mit einer Größe von 10 x 10 Pixeln. Wir machen diese mittels border-radius rund und geben noch einen Innenschlagschatten um die Kameraeinfassung mit innen liegender Linse zu imitieren.

Fehlt noch die Benachrichtigungs-LED unterhalb des Displays:

.led {
  position: absolute;
  bottom: 35px;
  right: 50%;
  width: 4px;
  height: 4px;
  margin-right: -2px;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(255,255,255,0.9);
}

Auch die LED wird im unteren Bereich absolut mittig positioniert. In Zusammenspiel Hintergrundfarbe und Schlagschatten erwecken wir den Eindruck einer aufleuchtenden LED.

Und fertig ist unser Nexus 7 Mockup.

Was kann ich damit jetzt anfangen?

Nun haben wir ein bisschen herumgebastelt und was hübsches erstellt. Aber gibt’s auch einen praktischen Nutzen? Ich denke schon.

Bist du ein Web- oder App-Developer? Dann kannst du das Mockup prima für deine Screenshots verwenden.

Beispiel gefällig?

Bildschirmfoto am 2015-06-05 um 15.43.04

<figure class="nexus7">
  <div class="case">
    <div class="camera"></div>
    <div class="glass"><img src="http://www.olivergast.de/wp-content/uploads/2015/06/ein-screenshot.png" alt="Screenshot"/></div>
    <div class="led"></div>
  </div>
</figure>

Willst du ein YouTube-Video promoten? Kein Problem:

<figure class="nexus7">
  <div class="case">
    <div class="camera"></div>
    <div class="glass"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/k1EvHdoxjP8" frameborder="0" allowfullscreen></iframe></div>
    <div class="led"></div>
  </div>
</figure>

Über den Quellcode lässt sich so ziemlich alles einbetten. Dokumente, Webseiten per iframe.

Wie wäre es mit einer Bilder-Slideshow.

See the Pen Nexus 7 (2013) Mockup (landscape) with another slideshow-effect by Oliver (@reap705) on CodePen.

Hast du noch weitere Ideen?

Den von mir veröffentlichten Code darfst du für private wie gewerbliche Projekte ohne Einschränkung verwenden, verändern, weitergeben und was auch immer du damit noch so anstellen magst. Viel Spaß damit.