Al crear CSS 3 para un sitio iPhone o el iPad, no sólo disfrutar de los beneficios de fuentes personalizadas y colocar sombras, sino también ganar el reto de dimensionamiento de texto en pantallas con diferentes dimensiones. No te preocupes más: saber cómo manejar mejor el tamaño del texto y luego descubrir las alegrías de texto estilo usando CSS 3.

Ajustar tamaño del texto

Para ayudar a hacer más fácil la lectura de texto en el iPhone, estableciendo el valor por defecto para el texto-size-adjust regla es auto: El texto se escala automáticamente a la pantalla.

En el iPad, el valor predeterminado es ninguno debido a que la pantalla más grande no requiere de texto para cambiar el tamaño automáticamente. En muchos sitios web, este ajuste hace que la página más fácil de leer, pero si usted ha diseñado cuidadosamente sus páginas y orientado sus estilos específicamente para el iPhone o el iPad, es posible que desee evitar que el cambio de tamaño automático.

He aquí tres ejemplos de cómo se puede utilizar esta opción:

-webkit-text-size-adjust: auto - webkit-text-size-adjust: none; -webkit-text-size-adjust: 80% -

Aquí está el ejemplo de código con la adición de la webkit-text-size-adjust conjunto de reglas ninguno- incluyendo este fragmento de código en el estilo de todas estas etiquetas a la vez hace que ninguno de texto en las etiquetas de cambiar el tamaño de forma automática:

/ * Este estilo ayuda a los navegadores antiguos entienden HTML5 y restablece etiquetas comunes a 0 * / artículo, a un lado, pie de página, encabezado, menú, navegación, sección, detalles, cuerpo, h1, h2, h3, p, ul, li, {border: 0-margin: 0-padding: 0-display: block - / * se detiene WebKit texto redimensionar * / - webkit-text-size-adjust: none;}

Adición de sombras de texto

El uso de CSS 3, puede añadir sombras paralelas al texto ya cualquier elemento en bloque, como un

etiqueta.

Una forma útil para aumentar el contraste entre el texto y el fondo es agregar una sombra de texto. Sombras de texto no sólo hacen que sus diseños de página más interesante, sino también hacer que el texto mucho más legible, especialmente si su diseño tiene un fondo complejo o los colores de primer plano y de fondo no tienen mucho contraste.

Ésta es la sintaxis para las sombras de texto para los navegadores WebKit:

text-shadow: vertical horizontal color-radio de desenfoque

Así es como rellenar estos marcadores de posición afecta a la sombra del texto:

• horizontal y vertical - Los dos primeros valores, que especifican los desplazamientos horizontales y verticales, se requieren. Especifican la distancia que la sombra se extiende por debajo ya la derecha del texto.

• radio de desenfoque - La tercera opción, que especifica la cantidad de desenfoque a la sombra, es opcional. Si no se incluye un radio de desenfoque, el valor predeterminado es 0, lo que hace que el color especificado aparece como un color sólido.

• color - Especifique un color utilizando su código hexadecimal del color (los códigos de color de 6 caracteres tradicionales) o su código de color RGBA, que le permite especificar entre rojo, verde y azul, así como la opacidad. (Más sobre RGBA en un momento.)

La siguiente línea de código añade una sombra de texto a la

etiqueta. Los números especifican que la sombra de texto se extiende dos píxeles a la derecha y debajo del texto con un desenfoque de 3 píxeles. Este ejemplo utiliza un color gris especificado con el código de color hexadecimal # 999.

h1 {text-shadow: 2px 2px 3px # 999-}

Si especifica el color como color RGBA, puede definir un color parcialmente transparente. Colores RGBA se definen por una serie de números que especifique la cantidad de rojo, azul o verde que desea. El rango de números es de 0 a 255.

El cuarto número define la cantidad de opacidad o transparencia. (El rango es de 1 para la plena opacidad a 0 para una total transparencia.) Por ejemplo, la .6 en el siguiente ejemplo indica un nivel de opacidad de 60 por ciento de porcentaje 40 el color subyacente brilla a través.

El estilo definido para la anterior

etiqueta se aplica a cualquier texto formateado con el Título 1 etiqueta. El estilo de abajo es un estilo de clase (indicado por el punto antes del nombre). Los estilos de clase son más versátiles y se pueden aplicar a cualquier texto en una página.

.sombra {text-shadow: .2em .2em .3em RGBA (153 153 153, 0.6) -}

En CSS, tamaños se pueden especificar en muchas mediciones diferentes, incluyendo píxeles, porcentajes, y la opción em utilizado en el ejemplo anterior.