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 : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.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 16 CKMiDeikSo
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Mar 21 Aoû 2012 - 0:49

    Merci d'avance =)



    Faire Une Lettrine - Page 16 707828SignArthur2
    mini-mimi
    mini-mimi
    FémininAge : 28Messages : 75

    Mar 21 Aoû 2012 - 8:58

    Merci ! :hug2:
    Akiki
    Akiki
    FémininAge : 26Messages : 24

    Mar 21 Aoû 2012 - 16:46

    Merci beaucoup !
    Kai Turindo
    Kai Turindo
    MasculinAge : 24Messages : 80

    Mar 21 Aoû 2012 - 21:31

    merci =)
    Kakuu
    Kakuu
    MasculinAge : 28Messages : 30

    Ven 24 Aoû 2012 - 14:06

    Merci



    Faire Une Lettrine - Page 16 Signa
    XxALTERIONxX
    XxALTERIONxX
    MasculinAge : 28Messages : 7

    Sam 25 Aoû 2012 - 14:43

    merci du partage
    Hisha
    Hisha
    FémininAge : 25Messages : 44

    Dim 26 Aoû 2012 - 21:11

    Merci **
    Molochaï
    Molochaï
    MasculinAge : 31Messages : 2

    Lun 27 Aoû 2012 - 14:09


    Super sympa ^^ Merci !
    Alys19
    Alys19
    FémininAge : 34Messages : 59

    Mar 28 Aoû 2012 - 2:42

    Wooaaah!!! Merci beaucoup!! Very Happy
    Alaynna
    Alaynna
    FémininAge : 32Messages : 77

    Mar 4 Sep 2012 - 12:20

    Je veux voir s'il te plait, merci d'avance **



    -- If we don't have the key we can't open we can't open whatever it is, we don't have, that it unlocks, so what purpose would be served in finding whatever need be unlocked, which we don't have, without first having found the key that unlocks it?
    -- So we're going after this key?
    -- You're not making any sense at all.
    Ruby*
    Ruby*
    FémininAge : 32Messages : 24

    Jeu 13 Sep 2012 - 17:57

    Merci pour cette astuce :heart:
    Kiwix
    Kiwix
    FémininAge : 29Messages : 68

    Dim 16 Sep 2012 - 18:09

    AH ! Merci Very Happy
    Eraendil
    Eraendil
    FémininAge : 32Messages : 92

    Mer 19 Sep 2012 - 21:18

    Merci :)



    Faire Une Lettrine - Page 16 Sign_n10
    mathou_inu
    mathou_inu
    FémininAge : 28Messages : 55

    Lun 24 Sep 2012 - 3:14

    Merci pour ce tuto ^^



    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Ven 28 Sep 2012 - 14:06

    Depuis le temps que je voulais trouver comment faire T_T Merci \0/



    Faire Une Lettrine - Page 16 30xivrd
    Renji13008
    Renji13008
    MasculinAge : 34Messages : 15

    Sam 29 Sep 2012 - 11:30

    merci !
    Khouro13
    Khouro13
    FémininAge : 25Messages : 208

    Sam 29 Sep 2012 - 16:54

    Merci. (;



    Faire Une Lettrine - Page 16 322292sweetaddictionShinku145
    Kaleidoscope
    Kaleidoscope
    FémininAge : 25Messages : 38

    Dim 30 Sep 2012 - 13:42

    Le mot magique ? Merciiii. :3



    Faire Une Lettrine - Page 16 553970miku1
    Plume'
    Plume'
    FémininAge : 26Messages : 166

    Dim 30 Sep 2012 - 15:53

    Sil te plait ^^ Et merci d'avance =D
    Rodrakaset
    Rodrakaset
    FémininAge : 104Messages : 79

    Ven 5 Oct 2012 - 21:13

    Merci Very Happy



    Faire Une Lettrine - Page 16 1354633509-nez
    StrawBerru
    StrawBerru
    FémininAge : 32Messages : 15

    Sam 6 Oct 2012 - 23:23

    Merci pour le tuto !
    Noctali
    Noctali
    FémininAge : 27Messages : 19

    Ven 12 Oct 2012 - 14:00

    Youpiiiiiiiiiiiiiiiiii !!! Je cherche comment faire depuis tellement longtemps !! Merci !!
    DelenaMiss
    DelenaMiss
    FémininAge : 26Messages : 7

    Sam 13 Oct 2012 - 0:08

    merci
    Candy Libertine
    Candy Libertine
    FémininAge : 26Messages : 136

    Sam 13 Oct 2012 - 15:43

    Je voudrais voir ! *__*
    Fares
    Fares
    MasculinAge : 31Messages : 51

    Sam 13 Oct 2012 - 20:09

    Sparrow-style a écrit:Merci pour cette astuce, cet effet est d'ailleurs très joli et présente bien un texte de contexte pour un forum je trouve^^

    Je l'ai ajoutée sur le site (en lien vers ton message ^^).
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 15:25