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 à ne pas rater :
Cartes Pokémon 151 : où trouver le coffret Collection Alakazam-ex ?
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 3 CKMiDeikSo
    Shin'/Smoke
    Shin'/Smoke
    FémininAge : 31Messages : 276

    Sam 11 Juin 2011 - 12:10

    Oh je le cherchais ! Merci 'o'
    harmony Lightnight
    harmony Lightnight
    FémininAge : 28Messages : 30

    Sam 11 Juin 2011 - 14:14

    Merci du partage <3
    Cherry-Line
    Cherry-Line
    FémininAge : 28Messages : 145

    Sam 11 Juin 2011 - 14:54

    Merci beaucoup, je crois que cette technique va m'être utile :3



    Faire Une Lettrine - Page 3 Signa10
    Milkiniz
    Milkiniz
    FémininAge : 30Messages : 72

    Sam 11 Juin 2011 - 19:29

    Mot Magique ?
    Ça marche aussi non ? x) Merciii décidément je trouve mon bonheur ici Very Happy
    Vampi
    Vampi
    FémininAge : 27Messages : 56

    Sam 11 Juin 2011 - 21:33

    Merci beaucoup =)



    Faire Une Lettrine - Page 3 SUXdpaGuJP
    Merci Yakkuru =D

    Spoiler:
    ShuiLong
    ShuiLong
    FémininAge : 30Messages : 17

    Dim 12 Juin 2011 - 19:57

      Owi, owi, apprends-nous Grand Maître Yoda ! S'il vous plaît !
    Hayate uchiwa
    Hayate uchiwa
    MasculinAge : 28Messages : 365

    Dim 12 Juin 2011 - 19:59

    Merci pour l'astuce Very Happy



    Faire Une Lettrine - Page 3 4c011a2ed470bsign-road
    Coralia
    Coralia
    FémininAge : 24Messages : 64

    Dim 12 Juin 2011 - 20:47

    Trop cool !
    Je cherchais cette astuce depuis longtemps, Merci ^^
    Daess
    Daess
    FémininAge : 28Messages : 12

    Lun 13 Juin 2011 - 11:57

    Merci d'avance ! (:



    Faire Une Lettrine - Page 3 Signad11
    Nel
    Nel
    FémininAge : 42Messages : 9

    Ven 17 Juin 2011 - 13:17

    Merci
    Tic&Toc
    Tic&Toc
    FémininAge : 29Messages : 59

    Ven 17 Juin 2011 - 14:42

    Ca donne un effet classe pour un contexte ou un début de RPG je trouve **
    Merci beaucoup :§erre:
    Romantic_Lucky
    Romantic_Lucky
    FémininAge : 29Messages : 13

    Ven 17 Juin 2011 - 19:44

    Merci beaucoup Very Happy



    BlueLife
    Faire Une Lettrine - Page 3 148235Signature2
    Mû Guzen
    Mû Guzen
    MasculinAge : 34Messages : 50

    Sam 18 Juin 2011 - 22:23

    Merci pour le tuto =D
    .joker
    .joker
    FémininAge : 28Messages : 10

    Sam 18 Juin 2011 - 22:45

      uhm .. bonjour, s'il te plait, merci, au revoir. :) merci :D ♥
    Bliniss
    Bliniss
    FémininAge : 35Messages : 6

    Dim 19 Juin 2011 - 2:18

    Pour faire original, merci.
    Slyfoa
    Slyfoa
    FémininAge : 38Messages : 8

    Dim 19 Juin 2011 - 14:33

    Alors je demande à voir Wink
    Merci à toi !
    Miss Volchok
    Miss Volchok
    FémininAge : 37Messages : 139

    Mar 21 Juin 2011 - 18:50

    Oh c'est cute, merci à toi.
    Fusions
    Fusions
    MasculinAge : 27Messages : 21

    Ven 24 Juin 2011 - 23:33

    Mot magique !
    cerizz
    cerizz
    FémininAge : 31Messages : 45

    Lun 27 Juin 2011 - 21:45

    Merci!
    Kittaby
    Kittaby
    FémininAge : 28Messages : 2

    Mer 29 Juin 2011 - 18:45

    PLOP, je veux voir ! Very Happy
    Chouchanna
    Chouchanna
    FémininAge : 36Messages : 8

    Mer 29 Juin 2011 - 20:55

    Ooh, je connaissais pas ça =D
    Meilia
    Meilia
    FémininAge : 30Messages : 92

    Mer 29 Juin 2011 - 22:51

    Merci =)
    avatar
    bossy
    MasculinAge : 29Messages : 118

    Jeu 30 Juin 2011 - 13:18

    merci



    Faire Une Lettrine - Page 3 Natsu_10
    asesino
    asesino
    MasculinAge : 34Messages : 14

    Jeu 30 Juin 2011 - 17:52

    cheers
    kro
    kro
    MasculinAge : 32Messages : 14

    Jeu 30 Juin 2011 - 19:15

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 9:24