Les sites Web sont devenus un moyen de partager des informations avec le monde entier. Cela a évolué pour inclure des médias tels que des photos et des vidéos. Mais le texte sur une page Web reste le choix prédominant pour la publication Web. Cela voudrait dire que la manière dont vous structurez les paragraphes, les phrases et le texte de la page peut avoir un impact considérable si un visiteur choisit de rester et de lire ce que vous avez à dire.
Dans ce tutoriel, j'aimerais partager quelques conseils CSS pour la création de conceptions créatives de paragraphes ou de texte. La lisibilité et les choix de polices sont souvent directement liés à la conception elle-même. Toutefois, l’incorporation d’effets de texte tels que des lettrines, des surlignages et des hyperliens reconnaissables permettra de distinguer le contenu de la page. Jetez un coup d’œil à ma démonstration d’échantillon en direct pour voir ce que nous essayons de construire.
Live Demo - Télécharger le code source
Mise en page générale
J'ai créé un doctype HTML5 typique avec une zone de contenu centrale fixe. Les styles de paragraphe sont censés apparaître conjointement avec d'autres éléments de page, comme une zone de notification ou une citation. Vous pouvez en dire beaucoup par écrit sans utiliser d’en-têtes secondaires sur la page.
Ma feuille de style est assez basique avec un certain nombre de réinitialisations et de positionnement CSS. Chaque élément de paragraphe est stylé avec ems en utilisant une marge supplémentaire en bas. Vous pouvez également voir comment j'ai créé la balise h1 en utilisant des bordures horizontales placées uniformément au centre.
J'ai choisi d'utiliser? Helvetica Neue? comme police principale sur toute la page. Il s'agit d'une alternative sans serif à Helvetica, mais elle ne devrait pas limiter les choix de typographie pour les éléments de page spéciaux.
Avant de passer aux effets, il vaut la peine de survoler le code HTML. Examinez certains noms de classe et les divers éléments que j'ai utilisés à des fins différentes dans chaque paragraphe.
Lettrine de paragraphe
La première chose que vous remarquerez probablement est la grande lettre supprimée dans le premier paragraphe. Cet élément de paragraphe utilise une classe de .premier qui est directement lié à l’effet lettrine. Les écrivains incluent souvent ce capital perdu dans les livres et les travaux d'impression - mais c'est aussi très bien pour les articles sur le Web.
Vous remarquerez que deux sélecteurs sont appliqués à cet effet de capital supprimé. CSS a une pseudo-classe nommée :première lettre qui cible la toute première lettre d'un élément. Notez que cela ne fonctionnera pas si votre paragraphe contient un autre élément précédant le texte (comme une vignette d’image). Si vous avez besoin d’une image sur le paragraphe lettrine, utilisez un arrière-plan CSS au lieu de la balise HTML img.Avec cette :première lettre sélecteur, nous pouvons appliquer la lettrine sur n’importe quel paragraphe en utilisant la classe .premier.
Mais avec une autre classe .dropcap nous pourrions appliquer l'effet en enveloppant spécifiquement la lettre dans un élément span. Cela apparaîtrait comme L dans le document HTML. Pour les moteurs de CMS tels que WordPress, il est plus simple de créer un thème prenant en charge la .premier classe ajoutée sur chaque premier paragraphe de vos messages ou pages (ou les deux).
J'ai également conçu un effet de lettrine alternatif qui crée un arrière-plan plus sombre entourant la lettre elle-même. Remarquez que cette lettrine alternative utilise la famille Helvetica Neue, tandis que la lettrine d'origine passe à Georgia ou à une autre police avec empattement. Cela prend le dialecte que nous trouvons souvent dans les livres imprimés et le reproduit sur l'écran numérique.
Maintenant, le 2ème paragraphe de la page utilise une classe de .plus gros ce qui augmente simplement la taille de la police et la hauteur de ligne de tout le paragraphe. Certains sites Web préfèrent agrandir le premier paragraphe pour le distinguer du reste de la page. Mais vous pouvez également essayer de combiner des lettrines avec un texte plus volumineux pour réellement attirer l'attention des gens.
Citations internes
Les articles qui ont des citations d'une autre personne utilisent souvent des citations à bloc et d'autres éléments similaires. Les citations tirées sont légèrement différentes car elles utilisent du texte directement à partir de l'article lui-même. Ceci est souvent fait pour souligner un point ou une phrase qui est crucial pour le thème général du contenu.
Mon dessin de citation à tirer est très similaire à ce que vous trouverez ici sur Design Shack. Il utilise un arrière-plan légèrement plus sombre ainsi que les ombres de la zone CSS3 pour paraître plus contrasté. Le texte de citation interne est également plus grand pour se distinguer des nombreux autres paragraphes. Il est important de placer ces guillemets à la gauche ou à la droite de la page afin qu'ils n'apparaissent pas comme des guillemets classiques.
Lors de l'utilisation de l'élément blockquote HTML5, nous pouvons souvent inclure d'autres éléments internes. Certaines citations sur blocs incorporeront plusieurs paragraphes et même une citation pour la citation. Le style de conception utilise beaucoup de rembourrages et de marges pour créer un espace entre les paragraphes habituels. La bordure gauche est comme un marqueur qui aide les lecteurs à reconnaître instantanément que la citation du bloc est différente des autres paragraphes environnants.
Personnalisation des symboles
Bien qu'il s'agisse d'un effet spécial minuscule, les visiteurs en prennent note lorsqu'ils lisent des pages de contenu. Les entités HTML sont utilisées pour afficher des symboles dans votre texte. Ces entités peuvent utiliser quelque chose comme Font Awesome pour afficher des icônes personnalisées ou vous pouvez les utiliser pour afficher des symboles HTML typiques.
Dans mon exemple, j'ai créé l'esperluette avec un élément wrapping span. Cela changera la famille de polices à Gabriela, qui utilise davantage une conception empattée. Un élément span générique avec la classe .fancyamp peut appliquer cette famille de polices à l'entité sans affecter aucun autre texte. Je l'ai aussi redimensionné un peu plus grand pour aider à se démarquer des lettres environnantes.
Mais ne pensez pas que cet effet ne peut être utilisé que pour des esperluettes. Les symboles, fractions et autres entités HTML protégés par le droit d'auteur pourraient tous tirer parti de cette conception stylisée. Vous pouvez même envisager d'autres effets de texte tels que des italiques gras ou la mise à jour de la couleur du texte.
Liens et tons en surbrillance
Dans les premiers paragraphes, vous trouverez du texte mis en surbrillance avec un lien d’ancrage spiffy. Ils ont tous deux un rembourrage supplémentaire, car ils utilisent tous les deux des couleurs de fond.
Pour les liens d'ancrage, j'ai choisi une palette de couleurs verte, bien que vous puissiez utiliser n'importe quel mélange de couleurs qui convient le mieux à votre mise en page. L'effet d'arrière-plan ajouté lors du survol de chaque lien aide les visiteurs à reconnaître immédiatement une fois qu'ils ont survolé un élément. Le texte du lien s'assombrit, de sorte qu'il se détache de l'arrière-plan d'un vert plus clair.
Depuis que j'ai inclus le rembourrage sur les côtés gauche et droit, les marges négatives sont utilisées pour contrecarrer les espaces étranges lors du survol de chaque lien. Il y a aussi un rembourrage sur le .surligner classe mais puisque cela n'a pas besoin d'un :flotter design, l’espace supplémentaire ne sera jamais réellement perceptible.
Si un effet de texte en surbrillance ne suffit pas, vous pouvez toujours créer des classes secondaires pour les notifications de paragraphe. Ma classe .remarquer change radicalement la couleur du texte pour correspondre à la nuance plus claire du jaune à l'arrière-plan. Utiliser le CSS3 ombre de texte la propriété aide à la lisibilité. Vous pouvez également créer des classes en double pour les zones de notification dans d'autres couleurs, telles que le vert ou le bleu.
Live Demo - Télécharger le code source
Fermeture
Je ne recommanderais pas d'intégrer tous ces effets sur chaque page de votre site Web. Mais il est sage de planifier ces styles à l'avance et de tout tester avant d'ajouter du code à votre feuille de style.
Les visiteurs sont tellement habitués aux effets traditionnels que vous pouvez vraiment captiver l'auditoire avec ces nuances. N'hésitez pas à télécharger une copie de mon code de tutoriel et à voir quelles autres idées vous pouvez ajouter à ces effets de paragraphe.