C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Effet pour vos catégories
Hier à 20:09 par vaaléeriiee

» Qui Est En Ligne - Utopia
Ven 06 Juil 2018, 23:20 par Vincent

» [RPG] Fiche personnage avec bannière latérale
Ven 29 Juin 2018, 06:27 par Tink

» [phpBB2] Sauvegarde des posts en cours d'écriture
Mar 26 Juin 2018, 02:30 par Laluna

» Apparition progressive du corps du forum
Dim 24 Juin 2018, 10:05 par Jimmy

» Formulaire de connexion rapide amélioré
Dim 24 Juin 2018, 10:03 par Jimmy

» Previsualiser le premier message d'un sujet
Dim 24 Juin 2018, 09:57 par Jimmy

» Trois colonnes avec effet Zoom
Mer 20 Juin 2018, 06:58 par Backflip


Partagez | 
 

Création d'une lettrine

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Création d'une lettrine


Informations générales

Description :
Nous allons apprendre dans ce tuto à créer une lettrine en CSS.

Qu'est-ce-qu'une lettrine ? Découvrons-le ensemble !

Démo :
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...

Testé sur :
Tous les navigateurs

Crédits :
Proposé par Orange le 30/05/2010 | Validé par Orange

Mise(s) à jour :
Mise à jour le 27/09/2012 par Espeon

Le tutoriel


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...

Au sujet de style
Placer vos propriétés CSS dans l'attribut style n'est pas une pratique conseillée (et c'est même très mal !). Cependant, si vous ne pouvez pas créer de classes CSS, alors vous pouvez recourir à cette méthode pour appliquer ponctuellement votre effet, on ne vous en tiendra pas rigueur.

Mais retenez que si vous le pouvez, créez des classes CSS pour y stocker vos propriétés, votre mise en forme !


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 Wink.

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 Paix



{ I would love to change the world, but they won't give me the source code }
MessageSujet: Création d'une lettrine   Dim 30 Mai 2010, 15:57
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5575



FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Création d'une lettrine   Mer 03 Aoû 2011, 08:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bbcsherlockfrance.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 31



Merci pour ce tuto ! Je sens qu'il va être bien utile dans le règlement et les annonces !
MessageSujet: Re: Création d'une lettrine   Mer 28 Mar 2012, 09:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://serialdesigner.forumactif.fr/
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



Merci pour ce tutoriel, je vais l'appliquer aussi dans mon règlement !




MessageSujet: Re: Création d'une lettrine   Lun 02 Avr 2012, 10:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://chroniclewerewolf.forums-actifs.net/index.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 23



Merci pour ce tuto. Ca donne un style extra qui correspond totale à l'esprit de mon forum!
MessageSujet: Re: Création d'une lettrine   Lun 21 Mai 2012, 07:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pacifista.bbactif.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 42



Aww. Merci pour ce tutoriel bien fort utile !
MessageSujet: Re: Création d'une lettrine   Ven 29 Juin 2012, 20:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



28-09-2012 - Tutoriel revu et mis à jour


MessageSujet: Re: Création d'une lettrine   Ven 28 Sep 2012, 07:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://darknessmansion23.forum-canada.com
{ Membre }
{ Membre }

Féminin Messages : 26



Merci
MessageSujet: Re: Création d'une lettrine   Sam 02 Mar 2013, 15:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cityofpub.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 78



Merci
MessageSujet: Re: Création d'une lettrine   Jeu 20 Juin 2013, 15:44
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Création d'une lettrine   
Revenir en haut Aller en bas
 

Création d'une lettrine

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

 Sujets similaires

-
» Création d'une lettrine
» Idée (Music est création)
» création d' une image pour tagger
» création de bannières
» Création d'un pantin

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Messages-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit | Informatique et Internet | Outils pour Webmestres