Préambule

Avant de commencer, il va falloir répondre à une question : qu’est-ce qu’une lettrine ?

Personnellement, quand l’idée m’est venue de faire ce tutoriel, j’ai dû chercher pendant plusieurs minutes le nom exact de ce que nous allons créer aujourd’hui. Pour finalement arriver à la conclusion que les grandes lettres que je voulais créer (comme en début de chapitre de certains romans) répondaient au nom de lettrine.

Voici un petit exemple du rendu de base de ce tutoriel qui vous permettra de comprendre ce que nous allons mettre en place (vous pouvez également observer la démo pour un style plus travaillé) :

Orange, dans son roman, a écrit:

L

orem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id tortor. Etiam ante nunc, gravida sed, vehicula quis, venenatis vitae, nisl. Nunc a leo. Proin in odio. Nullam dapibus augue et lectus lobortis porta. Praesent sit amet felis sed libero suscipit ullamcorper. Phasellus orci metus, bibendum in, commodo a, auctor ut, pede. Vestibulum rhoncus vehicula sapien. Curabitur tortor...

A

enean nunc augue, ullamcorper at, adipiscing vitae, suscipit quis, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus tortor, ultrices ac, accumsan ac, ullamcorper ut, augue. Suspendisse in nisi porttitor libero elementum vulputate. Pellentesque ut nunc. Curabitur lacus. Sed dictum libero vel est. Duis pulvinar mi eget massa...

Au cours de ce tutoriel, nous allons apprendre à réaliser cet effet, mais également à décorer nos lettres, y ajouter un cadre, un fond, un style particulier etc.

Mise en place du code

Il existe deux façons d’appliquer le CSS à notre lettrine :

1. La première sera utile pour les administrateurs de forum, car ils pourront ajouter le code CSS directement à la feuille de style de leur forum et ainsi faire des changements de couleurs et effets sans avoir à modifier chaque lettrine manuellement.
   
2. La seconde permettra aux membres qui n’ont pas accès au panneau d’administration d’afficher leur lettrine dans leur message. Selon la méthode choisie, il faudra coller ce(s) code(s) à l’endroit où vous souhaiterez voir apparaître votre lettrine.

Méthode 1, pour les administrateurs de forums

Créez une nouvelle classe dans le CSS de votre forum (Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS) :

Code:

.lettrine {
    float: left;
    /* PLEINS DE PROPRIÉTÉS CSS */
}

Ainsi, vous pouvez créer votre lettrine n'importe où sur le forum (y compris dans les messages si le HTML y est activé) simplement ainsi :

Code:

<div class="lettrine">LETTRE</div>blabla blablablabla...

Méthode 2, pour les membres

Vous ne pouvez pas créer de classe CSS, mais vous pouvez ponctuellement créer une lettrine dans un message si le HTML y est activé avec l'attribut style :

Code:

<div style="float: left; PROPRIÉTÉS CSS">LETTRE</div>blabla blablablabla...

Petit point

Dans un cas comme dans l'autre, votre lettrine n'affichera rien de particulier, nous ne lui avons pas encore donné de style précis.

La seule propriété qui lui a été attribuée est float: left;. Cette dernière permet d'afficher la lettre à gauche du texte, de manière à ce que le reste du texte la contourne, comme déjà montré dans l'exemple.

La logique veut que float: right; affiche votre lettre à droite du texte, mais comme nous écrivons de gauche à droite, l'intérêt de le savoir est moindre.

Personnalisation

Une question de taille

Il va nous falloir donner une taille à notre lettre, une lettrine de même taille que le reste de notre texte à peu d’intérêt. Disons, de manière complètement hypothétique, que nous lui donnerons une taille de 40px. Il faudra donc ajouter la propriété font-size : 40px; à notre code.

Comme ceci (selon la méthode) :

Méthode 1, pour les administrateurs de forum:

Méthode 2, pour les membres:

Bien évidemment, on pourra remplacer la taille de 40px par celle de notre choix .

Se faire de la marge

Ensuite, il nous faudra définir les marges de notre lettrine.

Pour un rendu optimal, c’est une étape importante du tutoriel. Jusqu’à maintenant vous aurez peut-être remarqué que notre lettrine « sort » du texte, et le résultat n’est franchement pas intéressant. Nous allons donc lui appliquer une marge supérieure interne équivalente à 1/4 de la grandeur en px de notre texte , nous avions un texte de 40px, donnons lui une marge supérieure interne de 10px avec la propriété padding-top : 10px;.

Vous remarquerez aussi que notre lettrine touche au texte d’en dessous, on aura qu’à lui ajouter une marge inférieure externe correspondant à 1/10 de la dimension en px de notre lettre, ici 4px, avec la propriété margin-bottom : 4px;.

Pour ces résultats (selon la méthode) :

Méthode 1, pour les administrateurs de forum:

Méthode 2, pour les membres:

Les mesures et proportions proposées ne sont qu’approximatives, vous pouvez les adapter selon vos désirs.

Ajoutons un cadre et des couleurs

Je ne pourrai pas vous apporter d’amples renseignements sur ce point, chacun peut décorer sa lettrine comme il l’entend. Je peux, néanmoins, vous donner quelques exemples libres d’utilisation :

Exemple 1:

Exemple 2:

Exemple 3:

Bref, les styles sont variées et les possibilités infinies. Bonne chance pour vos personnalisations.

C'était Orange pour CSSActif