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.

-29%
Le deal à ne pas rater :
PC portable – MEDION 15,6″ FHD Intel i7 – 16 Go / 512Go (CDAV : ...
499.99 € 699.99 €
Voir le deal

    Faire Une Lettrine

    Kazuya
    Kazuya
    MasculinAge : 31Messages : 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 27 CKMiDeikSo
    Elocha
    Elocha
    FémininAge : 73Messages : 255

    Jeu 19 Nov 2015 - 21:51

    Oh oui, oh oui apprends moi !



    eLoChA.
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Sam 21 Nov 2015 - 12:37

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

    Dim 6 Déc 2015 - 10:59

    merci =)
    Shoki
    Shoki
    FémininAge : 22Messages : 1308

    Sam 12 Déc 2015 - 21:45

    Merci !




    Faire Une Lettrine - Page 27 5qox
    #FifuKing.
    #FifuKing.
    MasculinAge : 27Messages : 37

    Mar 15 Déc 2015 - 15:45

    merci beaucoup !
    Camomille
    Camomille
    FémininAge : 20Messages : 62

    Sam 26 Déc 2015 - 18:01

    MERCIII
    Kobye
    Kobye
    FémininAge : 27Messages : 38

    Dim 3 Jan 2016 - 21:36

    Merci!
    Zekarant
    Zekarant
    MasculinAge : 22Messages : 51

    Dim 10 Jan 2016 - 21:35

    Merci !
    Myrddin
    Myrddin
    FémininAge : 33Messages : 61

    Lun 8 Fév 2016 - 19:05

    MERCI !
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Mar 9 Fév 2016 - 13:28

    Merci beaucoup ! '^'
    NekoMiaouw
    NekoMiaouw
    FémininAge : 27Messages : 148

    Lun 15 Fév 2016 - 20:12

    Merci



    Faire Une Lettrine - Page 27 388245alisign
    coconut groove
    coconut groove
    FémininAge : 36Messages : 112

    Mar 16 Fév 2016 - 21:40

    Merci! =D
    Bully
    Bully
    FémininAge : 21Messages : 39

    Ven 26 Fév 2016 - 14:02

    Merci
    Eiv
    Eiv
    MasculinAge : 29Messages : 511

    Jeu 3 Mar 2016 - 7:14

    Merci :)



    Faire Une Lettrine - Page 27 Signautopia
    Faire Une Lettrine - Page 27 472020userbarfanclubdelenthil
    bownye
    bownye
    FémininAge : 26Messages : 96

    Dim 6 Mar 2016 - 15:48

    merci !
    Kanu
    Kanu
    FémininAge : 34Messages : 62

    Sam 7 Mai 2016 - 13:17

    Merci :3
    Anonymous
    Invité

    Dim 29 Mai 2016 - 0:47

    Merci ! :hug:
    orphere
    orphere
    FémininAge : 28Messages : 18

    Dim 12 Juin 2016 - 17:48

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

    Dim 12 Juin 2016 - 20:27

    Merciiii :joie:



    Faire Une Lettrine - Page 27 Pb210
    Petite Bulle
    Petite Bulle
    FémininAge : 22Messages : 336

    Dim 12 Juin 2016 - 20:42

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

    Jeu 23 Juin 2016 - 13:29

    Merci à toi :)
    Damned
    Damned
    FémininAge : 22Messages : 109

    Mer 6 Juil 2016 - 17:20

    Merci!
    ArronGot
    ArronGot
    MasculinAge : 26Messages : 322

    Mer 6 Juil 2016 - 17:39

    Merci Wink



    Encore merci Alkhana :
    Faire Une Lettrine - Page 27 Signar10                 Faire Une Lettrine - Page 27 Sceauf10
    Suldreen
    Suldreen
    FémininAge : 21Messages : 12

    Mer 6 Juil 2016 - 22:45

    Merci beaucoup **
    .Lucifer.
    .Lucifer.
    MasculinAge : 51Messages : 184

    Lun 11 Juil 2016 - 22:11

    Merci ! Wink



    Faire Une Lettrine - Page 27 978358Divine
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2024 - 17:27