Lorsque vous créez CSS 3 pour un site iPhone ou iPad, vous pouvez non seulement profiter des avantages de polices personnalisées et des ombres portées, mais gagner aussi le défi de dimensionne le texte sur les écrans de dimensions différentes. Ne vous inquiétez plus: savoir comment gérer au mieux le dimensionnement du texte, puis découvrir les joies de texte de style en utilisant CSS 3.

Réglage de la taille du texte

Pour aider à rendre plus facile à lire du texte sur l'iPhone, le paramètre par défaut pour le text-size-adjust règle est auto: Le texte est automatiquement redimensionnée à l'écran.

Sur l'iPad, la valeur par défaut est aucun parce que le plus grand écran ne nécessite pas de texte à être redimensionnées automatiquement. Sur de nombreux sites, ce réglage rend la page plus facile à lire, mais si vous avez soigneusement conçu vos pages et vos styles ciblé spécifiquement pour l'iPhone ou l'iPad, vous voudrez peut-être éviter le redimensionnement automatique.

Voici trois exemples de la façon dont vous pouvez utiliser cette option:

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

Voici l'exemple de code avec l'addition de la webkit-text-size-adjust ensemble de règles aucun- y compris ce bout de code dans le style pour tous ces balises à un moment fait aucune du texte dans les balises redimensionner automatiquement:

/ * Ce style permet aux navigateurs plus âgés comprennent HTML5 et réinitialise balises communes à 0 * / article, côté, footer, header, menu, nav, section, les détails, le corps, h1, h2, h3, p, ul, li, {border: 0-margin: 0-padding: 0-display: block - / * arrête WebKit texte redimensionnement * / - webkit-text-size-adjust: none;}

Ajout d'ombres de texte

L'utilisation de CSS 3, vous pouvez ajouter une ombre portée au texte et à tout élément de niveau bloc, comme un

tag.

Un moyen utile pour augmenter le contraste entre le texte et l'arrière-plan est d'ajouter une ombre du texte. Ombrages de texte non seulement faire votre page conceptions plus intéressant mais aussi faire beaucoup de texte plus lisible, surtout si votre conception a un fond complexe ou les couleurs de fond et ne possèdent pas beaucoup de contraste.

Voici la syntaxe pour les ombres de texte pour les navigateurs WebKit:

text-shadow: horizontale verticale rayon de flou couleur-

Voici comment remplir ces espaces réservés affecte l'ombre du texte:

• horizontale et verticale - Les deux premières valeurs, qui spécifient les décalages horizontaux et verticaux, sont nécessaires. Ils précisent la distance l'ombre portée étend en dessous et à droite du texte.

• rayon de flou - Le troisième paramètre, qui indique la quantité de flou dans l'ombre, est facultatif. Si vous ne spécifiez pas un rayon de flou, la valeur par défaut est 0, ce qui rend la couleur spécifiée apparaissent comme une couleur unie.

• couleur - Spécifiez une couleur en utilisant son code hexadécimal de la couleur (les traditionnels codes de couleurs 6-de caractères) ou son code couleur RGBA, qui vous permet de spécifier entre rouge, vert et bleu, ainsi que l'opacité. (Plus de détails sur RGBA dans un instant.)

La ligne de code suivante ajoute une ombre de texte à la

tag. Les chiffres indiquent que l'ombre du texte étend deux pixels vers la droite et ci-dessous le texte d'une flou 3-pixel. Cet exemple utilise une couleur grise spécifié avec le code couleur hexadécimal # 999.

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

Si vous spécifiez la couleur comme une couleur RGBA, vous pouvez définir une couleur partiellement transparent. Couleurs RGBA sont définis par une série de chiffres qui indiquent comment bien rouge, bleu, ou vert que vous voulez. La plage de numéros est de 0 à 255.

Le quatrième numéro définit le montant de l'opacité ou la transparence. (La plage est 1 pour une opacité complète à 0 pour une transparence totale.) Par exemple, le .6 dans l'exemple suivant indique un niveau de 60 pourcentage de 40 pour cent de la couleur sous-jacente de l'opacité brille à travers.

Le style défini pour le précédent

tag applique à tout texte formaté avec le tag Rubrique 1. Le style ci-dessous est un style de classe (indiqué par le point avant le nom). Les styles de classe sont plus polyvalents et peuvent être appliquées à tout texte sur une page.

.ombre {text-shadow: .2em .2em .3em rgba (153 153 153, 0,6) -}

En CSS, tailles peuvent être spécifiés dans de nombreuses mesures différentes, y compris les pixels, les pourcentages, et l'option de em utilisé dans l'exemple précédent.