Apprendre à utiliser CSS créerfantaisie majuscules initiales pour vos paragraphes. Il existe même une technique de remplacement d'image simple pour utiliser une image graphique pour votre casquette initiale.
Styles de base des majuscules initiales
Il existe trois styles de base de majuscules initiales dans les documents:
- Soulevé - le plus courant, 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 descendue en dessous de la première ligne de texte. Le texte suivant flotte alors autour de lui.
- Adjacent - où la première lettre est dans une colonne à côté du reste du texte. Ceci est plus courant dans l'impression que dans la conception Web.
Les majuscules initiales ou lettrines sont très familières. Ils sont un excellent moyen d'habiller des portions de texte autrement longues et ennuyeuses. Et avec la propriété CSS: first-letter, vous pouvez facilement définir comment rendre vos premières lettres plus sophistiquées.
Créer un plafond initial simple
Tout ce que vous avez à faire pour créer une simple casquette initiale surélevée est d'agrandir la première lettre de votre paragraphe avec le pseudo-élément de première lettre:
p: first-letter { font-size: 3em; }
Mais beaucoup navigateurs voir que la première lettre est plus grande que le reste du texte sur la ligne, donc ils font l'interligne égal à 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: first-letter { font-size: 3em; }
p: first-line { line-height: 1em; }
Jouez avec la hauteur de ligne dans votre document jusqu'à ce que vous trouviez la bonne taille pour votre texte.
Jouez avec votre 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 plaît. Un style assez simple consiste à inverser les couleurs de votre police et la couleur de fond juste pour la première lettre:
p: première lettre {
taille de la police: 300 % ;
couleur d'arrière-plan: #000 ;
couleur: #fff ;
}
p: première ligne { hauteur de ligne: 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 en jouant avec les valeurs, vous pouvez indenter suffisamment votre première ligne pour que la première lettre semble être au milieu. Jouez simplement avec le pourcentage sur le retrait de texte du paragraphe jusqu'à ce qu'il semble correct:
p: première lettre {
taille de la police: 300 % ;
couleur d'arrière-plan: #000 ;
couleur: #fff ;
}
p: première ligne { hauteur de ligne: 100 %; }
p { texte en retrait: 45 %; }
Les majuscules initiales adjacentes sont difficiles avec CSS
Les majuscules initiales adjacentes peuvent être difficiles avec CSS car les différents navigateurs affichent les polices différemment. L'idée derrière la création d'un capuchon adjacent en CSS est d'utiliser la propriété text-indent sur la première ligne pour le pousser (vers la gauche) une valeur négative. Vous devrez également modifier la marge gauche de ce paragraphe d'un certain montant. Jouez avec ces chiffres jusqu'à ce que le paragraphe soit beau.
p {
retrait de texte: -2,5 em ;
marge gauche: 3em ;
}
p: first-letter { font-size: 3em; }
p: première ligne { hauteur de ligne: 100 %; }
Obtenir des casquettes initiales vraiment fantaisistes
La meilleure façon de créer un capuchon initial de fantaisie est de changer la police pour une famille de polices plus décorative. Si vous utilisez un série de polices suivi d'un police générique, cela contribuera à garantir que votre plafond initial s'affiche bien afin que vos clients puissent le voir, sans entrer dans les 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 { hauteur de ligne: 100 %; }
Et, comme d'habitude, vous pouvez regrouper toutes ces suggestions pour créer un plafond initial qui applique le style à votre paragraphe.
Utilisation d'une coiffe initiale graphique
Si, après tout cela, vous n'aimez toujours pas l'apparence de vos majuscules initiales sur la page, vous pouvez recourir à des 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 limite initiale et ne verront peut-être pas le texte masqué que l'image remplace. Cela peut rendre le paragraphe inaccessible, ou au mieux difficile à lire.
- Les images s'ajoutent toujours au temps de téléchargement d'une page. Si vous avez beaucoup de plafonds initiaux, vous pouvez augmenter considérablement le temps de téléchargement pour quelque chose que beaucoup de gens considèrent comme 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 afin d'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 en taille. Nous avons ensuite recadré 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 ici que nous définissons l'image à utiliser, l'interligne (hauteur de ligne), etc.
Vous devez utiliser la largeur et la hauteur de l'image pour définir le retrait du texte et le haut de remplissage du paragraphe. Pour notre image L, nous avions besoin d'un retrait de 95 px et d'un rembourrage de 72 px.
p.capL {
hauteur de ligne: 1 em ;
image d'arrière-plan: url (capL.gif);
background-repeat: pas de répétition ;
retrait de texte: 95 px ;
rembourrage 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é un span autour de ce premier élément avec la classe "initial" et avons dit au navigateur de ne pas afficher cette lettre:
span.initial { affichage: aucun; }
Le graphique s'affiche alors correctement. Vous pouvez jouer avec le retrait de texte sur le paragraphe pour obtenir le texte blotti jusqu'à la lettre, comme vous souhaitez qu'il s'affiche.