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


    Faire Une Lettrine

    Partagez
    avatar
    Kazuya
    MasculinAge : 24Messages : 1497

    le Mar 12 Avr - 0: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 - 3:58, édité 1 fois



    avatar
    Elocha
    FémininAge : 66Messages : 255

    le Jeu 19 Nov - 20:51

    Oh oui, oh oui apprends moi !



    eLoChA.
    avatar
    Rimaï J. Godwin
    MasculinAge : 21Messages : 68

    le Sam 21 Nov - 11:37

    On dit, s'il te plaaaait ^^
    avatar
    Invité

    le Dim 6 Déc - 9:59

    merci =)
    avatar
    Shoki
    FémininAge : 15Messages : 1298

    le Sam 12 Déc - 20:45

    Merci !





    avatar
    #FifuKing.
    MasculinAge : 20Messages : 33

    le Mar 15 Déc - 14:45

    merci beaucoup !
    avatar
    Camomille
    FémininAge : 16Messages : 47

    le Sam 26 Déc - 17:01

    MERCIII
    avatar
    Kobye
    FémininAge : 20Messages : 37

    le Dim 3 Jan - 20:36

    Merci!
    avatar
    Zekarant
    MasculinAge : 15Messages : 51

    le Dim 10 Jan - 20:35

    Merci !
    avatar
    Myrddin
    FémininAge : 26Messages : 56

    le Lun 8 Fév - 18:05

    MERCI !
    avatar
    Saya Shirayuki
    FémininAge : 24Messages : 149

    le Mar 9 Fév - 12:28

    Merci beaucoup ! '^'
    avatar
    NekoMiaouw
    FémininAge : 20Messages : 116

    le Lun 15 Fév - 19:12

    Merci



    avatar
    coconut groove
    FémininAge : 29Messages : 110

    le Mar 16 Fév - 20:40

    Merci! =D
    avatar
    Bully
    FémininAge : 14Messages : 38

    le Ven 26 Fév - 13:02

    Merci
    avatar
    Eiv
    MasculinAge : 22Messages : 486

    le Jeu 3 Mar - 6:14

    Merci :)



    avatar
    bownye
    FémininAge : 19Messages : 90

    le Dim 6 Mar - 14:48

    merci !
    avatar
    Kanu
    FémininAge : 27Messages : 56

    le Sam 7 Mai - 11:17

    Merci :3
    avatar
    Nely Suglisse
    FémininAge : 22Messages : 66

    le Sam 28 Mai - 22:47

    Merci ! :hug:
    avatar
    orphere
    FémininAge : 21Messages : 7

    le Dim 12 Juin - 15:48

    Oh j'aimerai bien savoir comment on fait *-* Merci pour le tuto !
    avatar
    Petite Bulle
    FémininAge : 15Messages : 327

    le Dim 12 Juin - 18:27

    Merciiii :joie:



    avatar
    Petite Bulle
    FémininAge : 15Messages : 327

    le Dim 12 Juin - 18:42

    C
    'est trop cool ** Merci beaucoup <3
    avatar
    céleste callisto
    FémininAge : 25Messages : 37

    le Jeu 23 Juin - 11:29

    Merci à toi :)
    avatar
    Damned
    FémininAge : 15Messages : 108

    le Mer 6 Juil - 15:20

    Merci!
    avatar
    ArronGot
    MasculinAge : 19Messages : 325

    le Mer 6 Juil - 15:39

    Merci Wink



    Encore merci Alkhana :
                    
    avatar
    Suldreen
    FémininAge : 14Messages : 10

    le Mer 6 Juil - 20:45

    Merci beaucoup **
    avatar
    .Lucifer.
    MasculinAge : 43Messages : 150

    le Lun 11 Juil - 20:11

    Merci ! Wink



    Contenu sponsorisé


      La date/heure actuelle est Lun 27 Mar - 14:35