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 : -20%
-20% Récupérateur à eau mural 300 ...
Voir le deal
79 €

    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 20 CKMiDeikSo
    Aile
    Aile
    FémininAge : 36Messages : 134

    Sam 23 Mar 2013 - 23:02

    Superbe effet. Merci beaucoup.



    Faire Une Lettrine - Page 20 799284Sanstitre1
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Dim 24 Mar 2013 - 10:11

    Merci à toi!
    Ronron
    Ronron
    FémininAge : 24Messages : 70

    Lun 25 Mar 2013 - 20:48

    Merci Very Happy
    Brodette
    Brodette
    FémininAge : 26Messages : 119

    Lun 25 Mar 2013 - 23:57

    Merciiiiiiiii
    Azylis
    Azylis
    FémininAge : 32Messages : 115

    Ven 29 Mar 2013 - 11:54

    Voyons voir le mystère de la lettrine... Merci du partage !



    Faire Une Lettrine - Page 20 Pokamo10
    libulin
    libulin
    MasculinAge : 51Messages : 14

    Ven 29 Mar 2013 - 22:22

    Merci d'avance,
    pourrais-je avoir cette astuce :)
    Lilie
    Lilie
    FémininAge : 40Messages : 190

    Dim 31 Mar 2013 - 19:52

    Merrrrccciiii !!!
    Lithium
    Lithium
    MasculinAge : 29Messages : 199

    Mer 3 Avr 2013 - 14:30

    M - E - R - C - I



    Faire Une Lettrine - Page 20 14062506094710522412343305
    Rapsodie♥
    Rapsodie♥
    FémininAge : 31Messages : 63

    Mer 3 Avr 2013 - 17:11

    merci



    - Ecrire, c'est ranger le bordel qu'on a dans sa tête. -
    Sinavlia
    Sinavlia
    FémininAge : 26Messages : 158

    Ven 5 Avr 2013 - 19:53

    Merci beaucoup, justement je cherchais à le faire !



    Faire Une Lettrine - Page 20 Grec10
    Mitsu'ki
    Mitsu'ki
    FémininAge : 34Messages : 31

    Mer 10 Avr 2013 - 22:01

    Yay, la lettrine ça atomise des fougères, merci de l'astuce ham3



    Faire Une Lettrine - Page 20 1o27SvUHjU
    Luffa
    Luffa
    FémininAge : 26Messages : 22

    Jeu 11 Avr 2013 - 21:51

    Merchi beaucoup d'avance ! ;D
    Hashirama Senju
    Hashirama Senju
    MasculinAge : 30Messages : 79

    Ven 12 Avr 2013 - 20:55

    =D Merci la petite chose qui fait la différence =)
    Olympus
    Olympus
    FémininAge : 32Messages : 16

    Sam 13 Avr 2013 - 16:02

    Merci d'avance! Wink
    Ivy
    Ivy
    FémininAge : 28Messages : 45

    Sam 13 Avr 2013 - 17:53

    Merci.
    teteaclaquefr
    teteaclaquefr
    MasculinAge : 33Messages : 39

    Mer 17 Avr 2013 - 14:51

    ça me tarde de voir ça ! Wink
    Hope
    Hope
    MasculinAge : 26Messages : 763

    Mer 17 Avr 2013 - 15:09

    merci ^^
    EthanHol
    EthanHol
    FémininAge : 30Messages : 218

    Mar 23 Avr 2013 - 18:18

    Merci d'avance ! =)



    Faire Une Lettrine - Page 20 Sans_t14
    Valinwë
    Valinwë
    FémininAge : 32Messages : 120

    Ven 26 Avr 2013 - 1:33

    Merci pour le tuto !



    Faire Une Lettrine - Page 20 Bangba10
    Hwan-Leo Flores
    Hwan-Leo Flores
    FémininAge : 30Messages : 275

    Ven 26 Avr 2013 - 1:45

    je veuuuux s'il te plait merciiiiiiiii



    Faire Une Lettrine - Page 20 Jjs4
    Pétale de Lune
    Pétale de Lune
    FémininAge : 24Messages : 7

    Sam 27 Avr 2013 - 12:55

    Merci
    Plume de Chouette
    Plume de Chouette
    FémininAge : 22Messages : 22

    Sam 27 Avr 2013 - 13:53

    :friends: S' il te plait! Merci d'avance aussi!
    Tarzansystem
    Tarzansystem
    MasculinAge : 31Messages : 5

    Sam 4 Mai 2013 - 14:24

    merci
    Laven
    Laven
    FémininAge : 34Messages : 9

    Mer 8 Mai 2013 - 12:20

    merci =)
    L'Aveugle
    L'Aveugle
    FémininAge : 25Messages : 19

    Mer 8 Mai 2013 - 22:02

    Bonsoir,
    Je ne sais pas combien de temps j'ai passé à chercher vainement cette astuce de lettrines, pour qu'elle soit finalement si simple d'accès sur ce forum. Haha, le monde n'est qu'ironie.
    Quoi qu'il en soit, l'effet rendu ne peut être que joli.

    Bref. Merci d'avance alors éè



    Faire Une Lettrine - Page 20 929090Sanstitre
    Contenu sponsorisé


      La date/heure actuelle est Ven 10 Mai 2024 - 1:37