El uso de webkit en el desarrollo de aplicaciones iPhone / iPod touch es una práctica común. Sin embargo, saltar de cacao a webkit y volver puede ser confuso para el usuario. Aquí hay un par de consejos simples para que el webkit de temática se parezca al marco UIKit de Cocoa.
Específicamente, lo que estoy emulando aquí es un UITableView.
Así que aquí hay un ejemplo de una de nuestras próximas aplicaciones. Estamos utilizando webkit aquí para darnos flexibilidad adicional. Sin embargo, queríamos mantener la sensación de Cocoa UIKit:
Fondo:
La aplicación de iphone de fondo a rayas gris / blanco es ubicua. Siéntete libre de robarlo desde aquí:
Para repetir este fondo en el webkit, usa algo como esto:
cuerpo {imagen de fondo: url ('iphone_back.png'); repetición de fondo: repetir; -webkit-user-select: none; -webkit-text-size-adjust: none; margen: 0;}
Texto de encabezado en relieve:
El iPhone utiliza con frecuencia el texto del encabezado grabado en relieve en este fondo despojado gris. Usando safaris sombra de texto, esto es bastante fácil de replicar. Llamé a esto el encabezamiento clase. Envuelve tu texto en una clase con el siguiente css:
.header {font-weight: negrita; tamaño de letra: grande; color: # 4c566c; text-shadow: 0px 1.5px 0px blanco;}
Cajas redondeadas
Por supuesto, las cajas redondeadas están en todas partes en la interfaz gráfica de usuario del iPhone. Aquí he llamado a mis divs. curva. Safari -webkit-border-radius Es una gran herramienta para esto. Aquí hay un ejemplo de css que proporcionará este efecto.
#curve {-webkit-border-radius: .5em; border: 1px gris sólido; margen: 5px; relleno: 5px 0px 5px 0px; color de fondo: #fff}
Si hay interés, publicaré más ejemplos más adelante. Por favor, siéntase libre de compartir el suyo en los comentarios a continuación.