L'utilisation de Webkit dans le développement d'applications pour iPhone / iPod touch est une pratique courante. Cependant, passer de cacao à Webkit et inverser peut être déroutant pour l'utilisateur. Voici quelques astuces simples pour que le webkit thématisant ressemble au framework UIKit de Cocoa.
Plus précisément, ce que je suis en train d’émuler est un UITableView.
Alors, voici un exemple d'une de nos applications à venir. Nous utilisons webkit ici pour nous donner une flexibilité supplémentaire. Cependant, nous voulions conserver la sensation de cacao UIKit:
Contexte:
Le fond rayé gris / blanc de l'application iphone est omniprésent. N'hésitez pas à le voler d'ici:
Pour répéter ce fond dans webkit, utilisez quelque chose comme ceci:
body {background-image: url ('iphone_back.png'); background-repeat: repeat; -webkit-user-select: aucun; -webkit-text-size-ajuster: aucun; marge: 0;}
Texte d'en-tête en relief:
L'iphone utilise fréquemment un texte d'en-tête en relief sur ce fond gris dépouillé. Utilisation de safari ombre de texte, ceci est assez facilement reproduit. J'ai appelé ça le entête classe. Enveloppez votre texte dans une classe avec le css suivant:
.header {font-weight: gras; taille de police: grande; couleur: # 4c566c; texte-ombre: 0px 1.5px 0px blanc;}
Boîtes arrondies
Bien sûr, les boîtes arrondies sont partout dans l'interface graphique de l'iPhone. Ici j'ai appelé mes divs courbe. Safari -webkit-border-radius est un excellent outil pour cela. Voici un exemple de CSS qui fournira cet effet.
#curve {-webkit-border-radius:. 5em; bordure: 1px gris uni; marge: 5px; remplissage: 5px 0px 5px 0px; couleur de fond: #fff}
S'il y a un intérêt, je posterai plus d'exemples plus tard. N'hésitez pas à partager les vôtres dans les commentaires ci-dessous.