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 :
SSD interne Crucial BX500 2,5″ SATA – 500 ...
Voir le deal
29.99 €

    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 17 CKMiDeikSo
    Zeruda-Hime
    Zeruda-Hime
    MasculinAge : 24Messages : 13

    Mer 17 Oct 2012 - 14:41

    Merci !
    Siobhan
    Siobhan
    FémininAge : 34Messages : 34

    Dim 21 Oct 2012 - 13:33

    Merci beaucoup, c'est vraiment très pratique Very Happy
    Electro
    Electro
    FémininAge : 28Messages : 30

    Mer 24 Oct 2012 - 20:03

    Merci !
    Cortisalia
    Cortisalia
    FémininAge : 32Messages : 89

    Mer 24 Oct 2012 - 21:37

    Merci beaucoup pour cette astuce Very Happy
    Eichiro
    Eichiro
    MasculinAge : 31Messages : 47

    Jeu 1 Nov 2012 - 16:49

    Merci
    Linn
    Linn
    FémininAge : 23Messages : 24

    Ven 2 Nov 2012 - 19:13

    Ça à l'air pas mal du tout!

    Merci beaucoup ^^



    Faire Une Lettrine - Page 17 763787neverulinn
    Stanislava
    Stanislava
    FémininAge : 29Messages : 102

    Sam 10 Nov 2012 - 9:05

    Merci beaucoup ^o^



    Faire Une Lettrine - Page 17 777748signnu
    Sacagawea
    Sacagawea
    FémininAge : 29Messages : 236

    Lun 12 Nov 2012 - 3:33

    *Prend son air curieux de tout et remercie pour ce tutoriel Very Happy *
    melinda020
    melinda020
    FémininAge : 30Messages : 7

    Sam 17 Nov 2012 - 10:33

    Merciiiiiii, ça rendra mes rps plus esthétiques *-*
    Espérance
    Espérance
    FémininAge : 27Messages : 48

    Sam 17 Nov 2012 - 20:27

    Waouh, merci beaucoup. *o*



    Faire Une Lettrine - Page 17 Sans_t11
    Newteen
    Newteen
    FémininAge : 35Messages : 61

    Lun 19 Nov 2012 - 0:51

    Ho super, j'aime beaucoup cette effet !

    Dévoile moi le secret, teuplééé Very Happy

    Et merci d'avance Razz



    "-Voudriez-vous me dire, s'il vous plaît, par où je dois m'en aller d'ici ?
    -Cela dépend beaucoup de l'endroit où tu veux aller.
    -Peu importe l'endroit...
    -En ce cas, peu importe la route que tu prendras.
    -... pourvu que j'arrive quelque part »
    Sora no Hime
    Sora no Hime
    FémininAge : 44Messages : 5

    Jeu 22 Nov 2012 - 13:31

    Merci d'avance pour cette astuce
    Asaliah
    Asaliah
    FémininAge : 39Messages : 120

    Jeu 22 Nov 2012 - 21:50

    Merci pour ce tuto !



    Faire Une Lettrine - Page 17 Signu10
    Prongs
    Prongs
    MasculinAge : 41Messages : 203

    Dim 25 Nov 2012 - 8:49

      Merci beaucoup \O/



    Faire Une Lettrine - Page 17 Christ10 Faire Une Lettrine - Page 17 Raph310
    TOM ELVIS JEDUSOR ~ JE SUIS VOLDEMORT
    Lord Voldemort est mon passé, mon présent & mon avenir

    Hiroyuko
    Hiroyuko
    MasculinAge : 37Messages : 11

    Lun 26 Nov 2012 - 19:40

    Merci?
    Tameless+
    Tameless+
    FémininAge : 27Messages : 252

    Ven 30 Nov 2012 - 2:30

    Aww!!! oui!! j'vais en mettre pertout partout!!!! *-*



    Faire Une Lettrine - Page 17 LwrfNGA
    The Fallen Angel
    The Fallen Angel
    MasculinAge : 28Messages : 36

    Ven 30 Nov 2012 - 20:45

    Merci
    Mile
    Mile
    FémininAge : 26Messages : 20

    Sam 1 Déc 2012 - 11:57

    Merci
    little.mousse
    little.mousse
    FémininAge : 32Messages : 6

    Lun 3 Déc 2012 - 3:12

    je veux s'il te plait =)
    edit ; merciii
    Wander
    Wander
    FémininAge : 30Messages : 20

    Mar 4 Déc 2012 - 18:38

    Merci bien :)
    C'est super joli et ça rend bien, dans un contexte !
    Alyssia-xx
    Alyssia-xx
    FémininAge : 30Messages : 14

    Mar 4 Déc 2012 - 18:52

    Merci ♥
    Chucky'
    Chucky'
    MasculinAge : 26Messages : 80

    Mer 5 Déc 2012 - 18:09

    merci ^^



    Faire Une Lettrine - Page 17 1370524847-cooltext1062715975
    TwoScars
    TwoScars
    FémininAge : 24Messages : 3

    Lun 10 Déc 2012 - 20:13

    Merci Very Happy
    Miss Ryuichi
    Miss Ryuichi
    FémininAge : 33Messages : 36

    Ven 14 Déc 2012 - 19:07

    Bien ce tuto Wink
    T_Time
    T_Time
    FémininAge : 27Messages : 104

    Ven 14 Déc 2012 - 20:43

    Merci du partage :]
    Contenu sponsorisé


      La date/heure actuelle est Dim 10 Nov 2024 - 20:48