AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

Partagez
 

 [Tutoriel code] Lettrines

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Eryl

Eryl


messages : 224
Date d'inscription : 30/06/2013
Age : 38

Fiche de Personnage
Protection Divine:
Titres: 0

[Tutoriel code] Lettrines Empty
MessageSujet: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines EmptyMer 17 Juil - 11:31

Pouêt. Razz

J'ai vu qu'Athéna aimait bien les lettrines, alors je vais donner un moyen simple d'en insérer en début de paragraphe.

Tout d'abord, il vous faut une jolie police (du moins, c'est mieux Razz). Je vous conseille trois types de polices :
Edwardian Script ITC : Simple, c'est la police qu'a utilisée Athéna dans son post "Alerte à Ephèse". (Si vous ne voyez que de simples majuscules, cliquez sur le lien, c'est que vous ne possédez pas la police. Wink)
Zenda : un peu plus élaborée, c'est la police utilisée régulièrement pour les lettrines sur les sites et forums.
Fantastic Pete : vous voyez les boutons en haut du forum ? C'est cette police là ! Wink
Si vous ne possédez pas ces polices, profitez du lien que je vous ai mis pour les télécharger et les installer. ^^ (Tutoriel à venir. Razz)


Sans police personnalisée (taille de la police : 200%) :

Code:
<div style="float:left; font-size:200%">D</div>ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.
D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple. Droite, ses cheveux mauves aux reflets dorées flottant allègrement dans la douce brise naissante et son regard chaleureux, mais déterminé projeté vers chacune de ses maisons.
Ses pupilles d'une couleur bleue tendre observaient chacune des maisons du zodiaque, s'égarant ici et là sur les premières maisons habitées, leur faisant comprendre qu'elle avait besoin d'eux, envoyant une infinie partie de son cosmos, appelant ces divins protecteurs pour les amener à elle.


Avec Edwardian Script ITC (taille de la police : 250%) :

Code:
<div style="float:left; font-size:250%">[font=Edwardian Script ITC]D[/font]</div>ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.
D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple. Droite, ses cheveux mauves aux reflets dorées flottant allègrement dans la douce brise naissante et son regard chaleureux, mais déterminé projeté vers chacune de ses maisons.
Ses pupilles d'une couleur bleue tendre observaient chacune des maisons du zodiaque, s'égarant ici et là sur les premières maisons habitées, leur faisant comprendre qu'elle avait besoin d'eux, envoyant une infinie partie de son cosmos, appelant ces divins protecteurs pour les amener à elle.


Avec Zenda (taille de la police : 300%) :

Code:
<div style="float:left; font-size:300%">[font=Zenda]D[/font]</div>ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.
D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple. Droite, ses cheveux mauves aux reflets dorées flottant allègrement dans la douce brise naissante et son regard chaleureux, mais déterminé projeté vers chacune de ses maisons.
Ses pupilles d'une couleur bleue tendre observaient chacune des maisons du zodiaque, s'égarant ici et là sur les premières maisons habitées, leur faisant comprendre qu'elle avait besoin d'eux, envoyant une infinie partie de son cosmos, appelant ces divins protecteurs pour les amener à elle.


Avec Fantastic Pete (taille de la police : 250%) :

Code:
<div style="float:left; font-size:250%">[font=Fantastic Pete]D[/font]</div>ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.
D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple. Droite, ses cheveux mauves aux reflets dorées flottant allègrement dans la douce brise naissante et son regard chaleureux, mais déterminé projeté vers chacune de ses maisons.
Ses pupilles d'une couleur bleue tendre observaient chacune des maisons du zodiaque, s'égarant ici et là sur les premières maisons habitées, leur faisant comprendre qu'elle avait besoin d'eux, envoyant une infinie partie de son cosmos, appelant ces divins protecteurs pour les amener à elle.


Ce code évite juste le décalage des lignes tel que cela se produirait avec une simple augmentation de taille de la lettre et de la centrer verticalement par rapport à sa ligne. Je cherche encore comment faire une lettrine sur plusieurs lignes sans avoir à modifier le code css du forum... mais ça semble impossible...
Il est donc déconseillé de faire des lettrines trop grosses (300% est le maximum conseillé, selon la taille de la police), car cela se superposerait sur les lignes suivantes (ou précédentes).

Bref, ce n'est pas parfait, mais amusez-vous ! En plus de la police, vous pouvez ajouter de la couleur, de l'ombre...
Revenir en haut Aller en bas
Invité
Invité



[Tutoriel code] Lettrines Empty
MessageSujet: Re: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines EmptyMer 17 Juil - 12:20

.


Dernière édition par Milô le Mer 17 Juil - 14:05, édité 1 fois
Revenir en haut Aller en bas
Eryl

Eryl


messages : 224
Date d'inscription : 30/06/2013
Age : 38

Fiche de Personnage
Protection Divine:
Titres: 0

[Tutoriel code] Lettrines Empty
MessageSujet: Re: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines EmptyMer 17 Juil - 13:04

C'est une très jolie police, merci ! Wink
En revanche, l'archive de ton lien semble corrompu, donc voici un autre lien pour la télécharger : Eternal Call


Voici l'exemple avec le code (à 250%) :

D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.


Et, et... J'ai trouvéééééé !! :D

D
ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple. Droite, ses cheveux mauves aux reflets dorées flottant allègrement dans la douce brise naissante et son regard chaleureux, mais déterminé projeté vers chacune de ses maisons.
Ses pupilles d'une couleur bleue tendre observaient chacune des maisons du zodiaque, s'égarant ici et là sur les premières maisons habitées, leur faisant comprendre qu'elle avait besoin d'eux, envoyant une infinie partie de son cosmos, appelant ces divins protecteurs pour les amener à elle.


Il "suffit" de rajouter une marge dans le code : margin:5px. Le nombre indiqué en pixel détermine la distance à laquelle le reste du texte va se placer par rapport à la lettrine. Ce qui va le repousser vers la droite, mais aussi jouer sur les lignes suivantes.
Il faut du coup adapter cette valeur à la grosseur de la lettrine que l'on souhaite insérer (5px : deux lignes, 10px, trois lignes...), et bien sûr, la taille de la police. (Ici, taille de la police à 400px, marge à 5px.)
Amusez-vous bien ! Wink

Code:
<div style="float:left; font-size:400%; margin:5px">[font=Zenda]D[/font]</div>ès l'aube, les ombres furent chassées du sanctuaire par les rayons salvateur du levant, projetant l'image somptueuse de la déesse Athéna sur les marches de son temple.
Revenir en haut Aller en bas
Isis no rê
Fonda // Prêtresse d'Hadès//Surplis du Balrog.
Fonda // Prêtresse d'Hadès//Surplis du Balrog.
Isis no rê


messages : 653
Date d'inscription : 11/04/2013
Age : 32
Localisation : THIS IS SPARTAAAAAAA

Fiche de Personnage
Protection Divine: Alceste Surplis du Fossa, étoile céleste de la Férocité
Titres: 0

[Tutoriel code] Lettrines Empty
MessageSujet: Re: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines EmptyMer 17 Juil - 13:35

COPYRIGHT DE MON RP !

Je demande dédommagement et intérêt ! [Tutoriel code] Lettrines 3655055814 
Revenir en haut Aller en bas
Eryl

Eryl


messages : 224
Date d'inscription : 30/06/2013
Age : 38

Fiche de Personnage
Protection Divine:
Titres: 0

[Tutoriel code] Lettrines Empty
MessageSujet: Re: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines EmptyMer 17 Juil - 13:52

Bawoui, ça faisait un joli paragraphe... :3

...

Bisous ?
Revenir en haut Aller en bas
Contenu sponsorisé




[Tutoriel code] Lettrines Empty
MessageSujet: Re: [Tutoriel code] Lettrines   [Tutoriel code] Lettrines Empty

Revenir en haut Aller en bas
 

[Tutoriel code] Lettrines

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [tutoriel code] Surligner un texte
» [tutoriel code] Insérer un Texte à Coté D'une image
» [Tutoriel Graphisme] Diverses astuces
» [tutoriel Graphisme] Qu'est-ce qu'un Brush et comment en faire ?
» code pub SOTP

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Plume habile :: Espace détente :: Coins des graphistes et des tutoriels-