Apprenez à utiliser CSS pour créer des majuscules initiales sophistiquées pour vos paragraphes. Il existe même une technique simple de remplacement d'image consistant à utiliser une image graphique pour votre première casquette.
Styles de base des majuscules initiales
Il existe trois styles de base de majuscules initiales dans les documents:
- Surélevé - le plus commun, où la première lettre est plus grande et sur la même ligne que le texte actuel.
- Chuté - également assez courant, où la première lettre est plus grande et est passée sous la première ligne de texte. Le texte suivant flotte ensuite autour de lui.
- Adjacent - où la première lettre est dans une colonne à côté du reste du texte. Ceci est plus courant en impression que dans la conception Web.
Les initiales ou les lettrines sont très familières. Ils sont un excellent moyen d'habiller des textes longs et ennuyeux. Et avec la propriété CSS: first-letter, vous pouvez facilement définir comment rendre vos premières lettres plus agréables.
Créer une limite initiale simple
Tout ce que vous avez besoin de faire pour créer une casquette initiale surélevée consiste à agrandir la première lettre de votre paragraphe avec le pseudo-élément de première lettre:
p: première lettre {taille de police: 3em; }
Mais de nombreux navigateurs voient que la première lettre est plus grande que le reste du texte sur la ligne, ils font donc que les majuscules soient égales à ce qui aurait du sens pour cette première lettre, pas le reste de la ligne. Heureusement, cela est facile à corriger avec le pseudo-élément de première ligne et la propriété line-height:
p: première lettre {taille de police: 3em; }
p: première ligne {line-height: 1em; }
Jouez avec la hauteur de ligne dans votre document jusqu'à ce que vous trouviez la bonne taille pour votre texte.
Joue avec ta casquette initiale
Une fois que vous avez compris comment créer une casquette initiale, vous pouvez l’habiller avec des vêtements de fantaisie pour la faire ressortir. Jouez avec les couleurs, les couleurs d'arrière-plan, les bordures ou tout ce qui vous chante. Un style assez simple consiste à inverser les couleurs de votre police et de votre couleur d'arrière-plan uniquement pour la première lettre:
p: première lettre {
taille de police: 300%;
couleur de fond: # 000;
couleur: #fff;
}
p: première ligne {line-height: 100%; }
Une autre astuce consiste à centrer la première ligne. Cela peut être délicat avec CSS, car le milieu de la ligne de texte peut être différent si votre mise en page est flexible. Mais avec certains jeux avec les valeurs, vous pouvez indenter suffisamment votre première ligne pour faire apparaître la première lettre au milieu. Il suffit de jouer avec le pourcentage sur le retrait de texte du paragraphe jusqu'à ce qu'il semble correct:
p: première lettre {
taille de police: 300%;
couleur de fond: # 000;
couleur: #fff;
}
p: première ligne {line-height: 100%; }
Les majuscules sont adjacentes avec CSS
Les majuscules initiales adjacentes peuvent être difficiles avec CSS, car les différents navigateurs affichent les polices différemment. L'idée de créer une limite adjacente en CSS consiste à utiliser la propriété text-indent sur la première ligne pour la faire sortir (à gauche) d'une valeur négative. Vous devrez également modifier légèrement la marge gauche de ce paragraphe. Jouez avec ces chiffres jusqu'à ce que le paragraphe paraisse bien.
p {
retrait du texte: -2,5em;
marge gauche: 3em;
}
p: première lettre {taille de police: 3em; }
p: première ligne {line-height: 100%; }
Obtenir des casquettes initiales vraiment fantaisistes
La meilleure façon de créer une casquette initiale sophistiquée consiste à remplacer la police par une famille de polices plus décorative. Si vous utilisez une série de polices suivies d'une police générique, cela aidera à garantir que votre limite initiale s'affiche correctement afin que vos clients puissent la voir, sans s'attaquer aux problèmes d'accessibilité et de convivialité.
p: première lettre {
taille de police: 3em;
famille de polices: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p: première ligne {line-height: 100%; }
Et, comme d’habitude, vous pouvez regrouper toutes ces suggestions pour créer un plafond initial qui adapte le style des annonces à votre paragraphe.
Utilisation d'une limite initiale graphique
Si, après tout, vous n'aimez toujours pas l'apparence de vos majuscules sur la page, vous pouvez recourir aux graphiques pour obtenir l'effet exact que vous recherchez. Mais avant de vous décider à passer directement aux graphiques, vous devez être conscient des inconvénients de cette méthode:
- Les clients sans images ne verront pas la casquette initiale et risquent de ne pas voir le texte masqué que l'image remplace. Cela peut rendre le paragraphe inaccessible ou, au mieux, difficile à lire.
- Les images ajoutent toujours au temps de téléchargement d'une page. Si vous avez beaucoup de limites initiales, vous pouvez augmenter considérablement le temps de téléchargement de quelque chose que beaucoup de gens jugeraient insignifiant.
- Certains navigateurs affichent à la fois la première lettre masquée et l'image, ce qui peut rendre le texte du paragraphe étrange.
- Il est très difficile d’automatiser cette option, car vous devez savoir exactement quelle est la première lettre pour pouvoir utiliser le bon graphique. Ainsi, chaque fois que le paragraphe est modifié, vous devrez peut-être créer un nouveau graphique.
Tout d'abord, vous devez créer le graphique de la première lettre. Nous avons utilisé Photoshop pour créer la lettre L avec la police "Edwardian Script ITC". Nous l'avons fait énorme - 300pt de taille. Nous avons ensuite découpé l’image au strict minimum autour de la lettre et noté la largeur et la hauteur de l’image.
Ensuite, nous avons créé une classe "capL" pour notre paragraphe. C’est là que nous définissons quelle image utiliser, l’image principale (hauteur de ligne), etc.
Vous devez utiliser la largeur et la hauteur de l'image pour définir le retrait du texte et du remplissage du paragraphe. Pour notre image L, nous avions besoin d'un remplissage de 95px et de 72px.
p.capL {
hauteur de ligne: 1em;
image d’arrière-plan: url (capL.gif);
répétition de fond: non répétée;
retrait du texte: 95px;
rembourrage en haut: 72px;
}
Mais ce n'est pas tout. Si vous le laissez là, la première lettre sera dupliquée dans le paragraphe, d'abord avec le graphique, puis dans le texte. Nous avons donc ajouté une étendue autour de ce premier élément avec la classe "initiale" et avons demandé au navigateur de ne pas afficher cette lettre:
span.initial {display: none; }
Et le graphique s'affiche alors correctement. Vous pouvez jouer avec le retrait de texte sur le paragraphe pour que le texte soit parfaitement ajusté à la lettre, comme vous le souhaitez.
