4. Apps Programmieren – Look and Feel des iPhones umsetzen

Publiziert am 14. August 2010 von admin

Nachdem wir das Stylesheet erstellt und eingebunden haben kümmern wir uns um ein paar gestalterische Details:

Hintergrundgradient


#header h1 a {
     text-shadow: 1px 1px 0px #EEE;
     background-image: -webkit-gradient
           (linear, left top, left bottom, from(#ccc), to(#999));
}


Damit sieht die verlinkte Überschrift schon viel plastischer aus. Dann sollten wir noch…

Runde Ecken hinzufügen


#menu ul li:first-child a {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;  
}

#menu ul li:last-child a {
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;  
}

#content, #sidebar {
  padding: 12px;
}

Den border-radius muss man dabei den „li“ Elementen selbst zuweisen; versucht man es mit dem umgebenden „ul“, setzt sich dennoch der weiße Hintergrund durch.

So siehts aus im Browser / iPhone: iphone-app-demo

Verwenden Sie ein iPhone oder den Safari-Browser auf dem stationären PC. Andere Browser stellen diese CSS-Formatierung nicht dar.

Dieser Beitrag wurde unter Apps programmieren veröffentlicht. Setze ein Lesezeichen auf den Permalink.

7 Antworten auf 4. Apps Programmieren – Look and Feel des iPhones umsetzen

  2. order66 sagt:
    28. Juli 2011 um 09:29

    jQuery Mobile ist auch eine ganz gute Möglichkeit. Nimmt einem vieles ab, siehe z.B.:

    http://www.iphone-entwicklung.net/native-app-oder-nicht-entwicklung-von-apps-mit-jquery-mobile/

    Antworten
  4. Rautenstrauch(72) sagt:
    28. März 2014 um 16:38

    jetzt muss ich saudumm fragen: Gibt es hierzu eine HTML-Struktur, benötige ich für das Handy-Abbild javascript? Sorry….

    Antworten
    • html5-admin sagt:
      12. Juni 2014 um 08:49

      Etwas HTML-Code zur Web-App:

      <body>

<div id="header">
  <h1><a href="index.htm">iPhone App mit HTML und CSS</a></h1>
</div>

<div id="menu">
  <ul>
      <li><a href="http://www.selfhtml5.org">HTML5 ist toll</a></li>
        <li><a href="http://www.selfhtml5.org/category/css3/">CSS aber auch</a></li>
    </ul>

  <ul>
      <li><a href="http://www.selfhtml5.org/2010-apps-programmieren/apps-programmieren-das-iphone-stylesheet">zurück zum Artikel</a></li>
    </ul>

</div>

</body>

      Antworten

Schreibe einen Kommentar zu html5-admin Antworten abbrechen

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