Copyright HébergementWebs.com - License GPL

Comment créer des lettrines accrocheuses en css

site Internet   2021-01-04 12:24:11

Lors de la création de pages Web, l"expérience utilisateur doit être une priorité. Cela signifie que la simplicité, la hiérarchie visuelle et la navigabilité doivent être prioritaires dans votre processus de construction. Ces cibles les consignes pour une conception et une convivialité Web exceptionnelles ont le même objectif: permettre aux visiteurs de trouver facilement les informations qu"ils recherchent ou de mener à bien l"action qu"ils se proposent d"accomplir. Des polices de caractères lisibles, un jeu de couleurs cohérent et un fil d"Ariane ne sont que quelques éléments de conception qui peuvent améliorer l"expérience utilisateur sur votre site. Un autre est la lettrine. Dans cet article, nous expliquerons ce qu"est une lettrine et comment les créer en CSS. Qu"est-ce qu"une lettrine? Une lettrine est l"abréviation de «majuscule supprimée». C’est la grande lettre majuscule que vous voyez parfois au début d’un paragraphe dans les publications imprimées et numériques. Cet élément décoratif a généralement la taille de deux ou plusieurs lignes de texte dans un paragraphe. Dans Le Atlantique , les lettrines sont utilisées pour décomposer les sections d"un article et indiquer le point de départ de chacune pour le lecteur. Ils prennent l"espace de trois lignes de texte, comme on le voit dans l"extrait de «The American Nightmare» par Ibram X. Kendi ci-dessous. Source de l"image Le New Yorker utilise des lettrines dans un but similaire sur son site, mais à une taille plus petite. Ses lettrines occupent deux lignes au lieu de trois, comme on le voit dans l"extrait de «Comment lespandémies font des ravages - et Open Minds» par Lawrence Wright ci-dessous. Source de l"image Quand en choisissant les polices pour votre propre site , vous pouvez décider d"utiliser des lettrines pour améliorer la lisibilité de votre contenu. Dans ce cas, parcourons le processus de création de lettrines en CSS. Comment concevoir des lettrines créatives en CSS Il y a deux manières de créer des lettrines en CSS. La première consiste à envelopper la première lettre d"un paragraphe avec des balises Vous pouvez ensuite styliser la plage, sans affecter le reste du paragraphe, en utilisant un sélecteur CSS. Ci-dessous, nous allons utiliser la plage de sélection de type. Pour aligner la lettrine avec le haut de la première ligne du paragraphe et la marge gauche du paragraphe, vous pouvez utiliser le virgule flottante et la ligne -hauteur propriété. Définissez la propriété float à gauche et la hauteur de ligne à 85%. En définissant la hauteur de la ligne sur 85% au lieu de 100%, vous alignez le haut du «T» majuscule avec le haut du «h» minuscule. Ensuite, pour vous assurer que la lettrine et le paragraphe font pas de chevauchement, définissez une largeur fixe pour la travée. Utiliser 0,7em, soit 0,7 fois la largeur de la police du paragraphe, donnera l’illusion d’un remplissage entre les bords droit et inférieur de la lettrine et le paragraphe. Pour faire la goutte c p la taille de trois lignes de texte, définissez la taille de la police sur 400%. Notez que 400% de 16px (la taille de police par défaut dans l"éditeur Tryit de W3School) est de 64px. Enfin, pour vous assurer que la lettrine se démarque vraiment, changez la famille de polices en Georgia. Le reste du paragraphe sera Times New Roman par défaut dans l’éditeur Tryit de W3School. Regardons le code dans son ensemble. Voici le CSS: ; : 85%; Width: .7em; : 400%; : georgia; } Voici le HTML: C c"est un faux texte. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est plus du texte factice. Dans le paragraphe ci-dessus, la première lettre du texte est incorporée dans un élément L"étendue peut maintenant être définie par un ensemble de règles CSS, sans affecter le reste du paragraphe. Cet ensemble de règles comprend la propriété float et de sorte que la lettrine s"aligne avec le haut de la première ligne et la marge gauche du paragraphe. Il définit également la largeur de la plage à 0,7 fois la taille de la police du paragraphe, ce qui donne l"illusion d"un remplissage à droite et en bas. Il définit également la taille de la police comme 400% supérieure à la taille de police par défaut, de sorte que la lettrine occupe 3 lignes. Enfin, la police du Voici le résultat: Source de l"image La deuxième façon de créer des lettrines est d"utiliser la pseudo class :: first-letter. Cela ciblera la première lettre de la première ligne d"un élément de bloc, y compris un paragraphe. Utilisation d"une pseudo-class sélecteur, vous pouvez ensuite modifier le style. Nous allons faire preuve de plus de créativité avec l"exemple ci-dessous. Comme dans l"exemple ci-dessus, commencez par définir le flottant, la hauteur de ligne, la taille de la police et la police -family properties. Enregistrez pour la propriété float, qui doit être définie sur left, vous pouvez utiliser différentes valeurs de propriété. L"exemple ci-dessous utilise des pixels au lieu d"unités em et des valeurs de pourcentage, par exemple, et opte pour la police Montserrat. Remarque: il modifie également la taille de police par défaut du paragraphe de 16px à 14px. Supposons maintenant que vous souhaitiez changer la couleur et ajouter une bordure autour de votre lettrine. Pour ce faire, il vous suffit de définir la propriété color à n"importe quoi code couleur hexadécimal souhaité. Nous utiliserons un joli violet ci-dessous. Ensuite, en utilisant la propriété de bordure abrégée, vous pouvez définir le style et la couleur. Dans l"exemple ci-dessous, nous utiliserons une ligne continue et une nuance de violet pour la bordure. Ensuite, ajoutez un rembourrage de tous les côtés pour mettre un espace entre la lettre majuscule et la bordure. Enfin, définissez la propriété margin-right sur une valeur positive pour vous assurer que la bordure et le paragraphe ne se chevauchent pas et définissez la propriété margin-bottom sur une valeur négative afin que le paragraphe s"enroule autour de la lettrine. Regardons ce code dans son ensemble, puis voyons comment il s"afficherait sur le front-end. Voici le CSS: p :: first-letter { ; : 35px; : 55px; : Montserrat; c olor: # 7D3C98; : solid # D5C5EC; : 5px; 5px; Padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-bottom: -5px; } p { : 14px; } Voici le HTML: Ceci est un texte factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est un texte plus factice. C"est plus du texte factice. Dans les paragraphes ci-dessus, la première lettre de chacun est ciblée par un sélecteur de pseudo-class. Les lettres peuvent maintenant être stylées différemment du reste du paragraphe. Le CSS inclut certaines des propriétés que nous avons utilisées ci-dessus, notamment les propriétés float, , et . Ce qui le différencie de l"exemple précédent, c"est que les propriétés de couleur, de bordure, de remplissage et de marge sont également définies. En définissant ces propriétés avec des codes de couleur hexadécimaux et des valeurs de longueur différentes, la lettrine n"est pas seulement une couleur différente, mais est également encadrée. < code class = "html "> Voici le résultat: Source de l"image Amélioration de la convivialité de votre conception En utilisant les méthodes ci-dessus, vous pouvez créer des lettrines pour votre site Web unique. Il y a encore plus de stylin g des options CSS dont nous n"avons pas discuté. Vous pouvez jouer avec la couleur d"arrière-plan, la décoration du texte et d"autres propriétés CSS pour trouver le design parfait pour les lettrines sur votre site. Que vous construisiez votre site à partir de zéro ou que vous utilisiez un cadre de développement comme Bootstrap CSS , vous aurez juste besoin de quelques connaissances en HTML et CSS pour créer ces éléments de conception.