4. Apps Programmieren – Look and Feel des iPhones umsetzen

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

  1. order66 sagt:

    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/

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

    • html5-admin sagt:

      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>
      

Schreib einen Kommentar

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