Al crear CSS 3 para un sitio iPhone o el iPad, no sólo disfrutar de los beneficios de fuentes personalizadas y sombras, sino también adquirir el desafío de dimensionamiento texto en pantallas con diferentes dimensiones. No te preocupes más: saber cómo manejar mejor el tamaño de 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, la configuración de la regla de texto-size-adjust defecto es automático: El texto se escala automáticamente a la pantalla.

En el iPad, el valor predeterminado es ninguno porque la pantalla 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 el cambio de tamaño automático.

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

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

Aquí está el ejemplo de código con la adición de la regla webkit-text-size-adjust ajustado a ninguno; incluyendo este fragmento de código en el estilo de todas estas etiquetas a la vez hace que ninguna parte del 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 redimensionamiento * /
texto -webkit-size-adjust: none;

}

Adición de las sombras del texto

El uso de CSS 3, puede añadir sombras paralelas al texto ya cualquier elemento en bloque, como una etiqueta <div>.

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 fácil de leer, 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: horizontal color de radio de desenfoque vertical;

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 horizontal y vertical, 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.
• de 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 <h1>. Los números especifican que la sombra del texto se extiende dos píxeles a la derecha y debajo del texto con un desenfoque de 3 píxeles. En este ejemplo se 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 el 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 intervalo es de 1 por completo opacidad a 0 para una total transparencia.) Por ejemplo, el 0,6 en el siguiente ejemplo indica un nivel de opacidad del 60 por ciento; 40 por ciento de la color subyacente brilla a través.

El estilo definido para la etiqueta <h1> anterior 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.

.shadow {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.