Comment faire pour utiliser CSS3 pour créer Lettrines
introduction
Je comprends que le sélecteur: la première lettre a été pendant quelques années, mais je dois admettre que je ne l'ai jamais utilisé. J'ai récemment découvert un code, cependant, qui montre comment utiliser le sélecteur: la première lettre ainsi que du premier enfant et des effets d'ombre CSS3 pour créer un effet de lettrine. En utilisant cette combinaison de code vous permettra d'avoir un effet lettrine élégant sans avoir à ajouter constamment des balises spéciales pour le faire fonctionner.
Le code présenté dans cet article a été écrit par Chris Spooner, et vous pouvez voir la démo ici.
Montrez-nous le code!
Voici le code HTML qui est utilisé, et il le fait d'utiliser certaines des fonctionnalités de HTML5:
Soit vous mourez un héros ou vous vivez assez longtemps pour vous voir devenir le méchant.
En tapant cette ligne de code supplémentaire a vieilli assez rapidement, mais le résultat semble toujours agréable. Voilà pourquoi je donne cet effet lettrine CSS3 une certaine attention. Maintenant, pour le code CSS.
taille de police de p: 50px; line-height: 80px;
text-transform: majuscules;
text-shadow: 10px 10px 0 rgba (255,255,255,0.07);
>
Le code ci-dessus montre comment Chris style ses paragraphes. Prenez note qu'il a transformé tout le texte à être en majuscules. C'est un peu propre de code pour savoir, mais je ne sais pas combien de fois vous voulez l'utiliser dans le texte de tous les jours. Peut-être que vous pouvez l'utiliser pour les légendes, dans ce cas, l'effet d'ombre regarderait aussi agréable.
Ce bit suivant du code est crucial pour la lettrine de travailler avec succès. En plus d'utiliser d'abord: lettre, vous devez également utiliser en premier enfant. Cela permettra d'éviter l'effet de lettrine de se produire pour chaque paragraphe. Le premier élément enfant maintient le lettrine à la première lettre du premier paragraphe sur chaque page. Tu veux utilisation l'effet de lettrine et non plus de utilise le.
La taille 160px peut sembler énorme par rapport à la taille du paragraphe de 50px, mais vous devez garder à l'esprit que vous voulez que le lettrine pour enjamber quelques lignes. Dans le cas contraire, il ne serait pas une lettrine très efficace, serait-il?
La plupart des lettrines ont une touche de mise en forme spéciale pour compenser du reste du texte. Dans cette démo, Chris a ajouté une ombre au lettrine pour cette touche spéciale.