AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -16%
Friteuse sans huile NINJA Foodi Dual Zone 7,6 L 2400W ...
Voir le deal
135.01 €

    Faire Une Lettrine

    Kazuya
    Kazuya
    MasculinAge : 32Messages : 1499

    Mar 12 Avr 2011 - 2:06

    Rappel du premier message :




    Salut salut amis de NU (En plus ca rime x) )
    Bon, alors, si le mot lettrine ne vous parle pas, en voilà un exemple:

    Bonjour, je suis un petit exemple d'une lettrine. Une lettrine, qu'est-ce que c'est? C'est, selon Wikipédia, "une lettre initiale majuscule décorée placée en tête d'un texte et occupant une hauteur supérieure à la ligne courante. Les autres lettres du premier mot sont généralement en petites capitales." Voilà!


    Alors, vous voulez savoir comment faire? *Oh oui, oh oui apprends nous* Bien bien, mais il faut dire le mot magique les enfants!

    D'accord d'accord alors... Voici comment procéder. Tout d'abord, créer une div, qui contiendra votre texte, avec les attributs que vous voulez, sur l'exemple, il y a seulement un Text-Shadow.
    Ensuite, admettons que votre div s’appelle "texte", ce qui n'est qu'un exemple, vous pouvez mettre ce que vous voulez comme nom.
    Donc vous avez ceci:
    Code:
    <div class="texte">Ceci est mon texte. Le C de départ sera ma lettrine.</div>

    Et on ajoute dans le CSS :
    Code:
    .texte:first-letter {
      font-size:300%;
      float:left;
    }

    Vous pouvez changer le pourcentage, ce qui diminuera ou augmentera la taille de la lettrine, voire le mettre en pixels si vous préférez. Le float permet de faire en sorte que la lettre fasse comme une lettrine et se mette "à côté" du texte, tout en faisant en sorte que le reste du texte "s'enroule" en dessous. Vous pouvez également y rajouter les attributs que vous voulez en voilà quelques uns :

    Pour une bordure :
    Code:
    border: 1px solid (pour une ligne pleine) dotted (pour une bordure pointillée) dashed (pour une bordure en tiret);

    Pour une couleur de fond :
    Code:
    background: #fff;

    Pour arrondir la div (à coupler à une bordure ou une couleur de fond)
    Code:
    border-radius: 5px;
    pour une ombre portée :
    Code:
    text-shadow: 1px 1px 1px #000;

    Notez également que la lettrine conserve logiquement les attributs de la div d'origine.

    C'était Kazuya, en espérant que mon partage vous aidera! Sur ce, à plus, et bon courage!


    Dernière édition par Kazuya le Mer 13 Avr 2011 - 5:58, édité 1 fois



    Faire Une Lettrine - Page 15 CKMiDeikSo
    Wayz
    Wayz
    MasculinAge : 33Messages : 73

    Ven 6 Juil 2012 - 16:42

    Merci Cool
    Gouttou †
    Gouttou †
    FémininAge : 26Messages : 50

    Lun 9 Juil 2012 - 18:57

    Merci Very Happy



    Faire Une Lettrine - Page 15 365666rrrrr
    Okoia
    Okoia
    FémininAge : 31Messages : 30

    Mar 10 Juil 2012 - 17:22

    Merci ^^
    Be Shup's
    Be Shup's
    FémininAge : 26Messages : 33

    Ven 13 Juil 2012 - 18:44

    Merciii !!! *-* ^^



    Faire Une Lettrine - Page 15 Beshup17
    McIntosh
    McIntosh
    FémininAge : 35Messages : 27

    Mer 18 Juil 2012 - 14:25

    Merci *-* !
    LouGreen
    LouGreen
    FémininAge : 41Messages : 48

    Ven 20 Juil 2012 - 13:05

    Merci pour le tuto =)



    Faire Une Lettrine - Page 15 Tumblrlxvri03wlq1qzl05m

    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 30Messages : 864

    Sam 21 Juil 2012 - 15:39

    Merci :)
    Anonymous
    Invité

    Sam 21 Juil 2012 - 23:55

    Fallait y penser! :)
    Jake de Valombre
    Jake de Valombre
    MasculinAge : 49Messages : 8

    Dim 22 Juil 2012 - 11:45

    Merci
    Nervus66
    Nervus66
    MasculinAge : 34Messages : 1

    Jeu 26 Juil 2012 - 14:23

    Merci beaucoup
    NDA
    NDA
    MasculinAge : 30Messages : 20

    Sam 28 Juil 2012 - 21:05

    Petit troll : Magique Very Happy !
    Merci quand même ^^!
    Eden will love you
    Eden will love you
    FémininAge : 30Messages : 9

    Lun 30 Juil 2012 - 12:40

    wow merci :hug:
    Rosedesvents
    Rosedesvents
    FémininAge : 38Messages : 97

    Lun 30 Juil 2012 - 12:57

    Merci =)
    Younaka
    Younaka
    FémininAge : 29Messages : 22

    Lun 30 Juil 2012 - 18:12

    Merci pour le partage ? ^^
    Little Ghost
    Little Ghost
    FémininAge : 34Messages : 91

    Mar 31 Juil 2012 - 14:15

    Merci pour le partage =)
    Nyan-cat
    Nyan-cat
    FémininAge : 26Messages : 326

    Jeu 2 Aoû 2012 - 13:33

    merci 83



    Faire Une Lettrine - Page 15 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Ilmryn
    Ilmryn
    FémininAge : 27Messages : 36

    Lun 6 Aoû 2012 - 20:59

    Merci pour l'aide ^^



    Faire Une Lettrine - Page 15 566836signaill
    James Amerghi
    James Amerghi
    MasculinAge : 34Messages : 6

    Jeu 9 Aoû 2012 - 4:39

    Merci d'avance Razz
    Rehan
    Rehan
    FémininAge : 28Messages : 67

    Sam 11 Aoû 2012 - 10:35

    Lettriiiine ! Merci beaucoup. J'espère que je saurais l'adapter à un style médiéval !
    Mad. H.
    Mad. H.
    FémininAge : 36Messages : 21

    Dim 12 Aoû 2012 - 10:36

    C'est génial comme concept! Merci pour le partage Very Happy
    Jo-Champi
    Jo-Champi
    FémininAge : 36Messages : 68

    Mar 14 Aoû 2012 - 18:00

    S'il te plait! Very Happy



    Faire Une Lettrine - Page 15 Bannie10
    Luinil
    Luinil
    FémininAge : 33Messages : 19

    Jeu 16 Aoû 2012 - 1:14

    Merci beaucoup !



    Faire Une Lettrine - Page 15 UAH6Vcb

    After all this time?
    Brindillee
    Brindillee
    FémininAge : 24Messages : 32

    Jeu 16 Aoû 2012 - 19:53

    Merci Very Happy
    Summeryoid
    Summeryoid
    FémininAge : 30Messages : 32

    Sam 18 Aoû 2012 - 13:50

    Thanks !



    Faire Une Lettrine - Page 15 539853pin
    Oxalyde
    Oxalyde
    FémininAge : 29Messages : 68

    Sam 18 Aoû 2012 - 19:34

    C'est toujours sympa de faire comme ça dans un RP, ça embelli et je sens que je vais utiliser les lettrines x)
    Merci pour ce partage ! (:



    "Nous travestissons nos faiblesses en force. Nos frêles corps sont nos armures"
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:26