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 :
Bon plan achat en duo : 2ème robot cuiseur ...
Voir le deal
600 €

    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 18 CKMiDeikSo
    Ahleya
    Ahleya
    FémininAge : 29Messages : 23

    Mer 19 Déc 2012 - 16:43

    Merci beaucoup pour cette astuce *O*



    Faire Une Lettrine - Page 18 Asign
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Mer 19 Déc 2012 - 19:31

    merciii
    Deviliar
    Deviliar
    FémininAge : 35Messages : 44

    Jeu 20 Déc 2012 - 14:48

    s'il te plait
    avatar
    Tony_Wayne
    MasculinAge : 33Messages : 45

    Dim 23 Déc 2012 - 0:10

    Merci ^^
    Lou' Luciole
    Lou' Luciole
    FémininAge : 25Messages : 7

    Dim 23 Déc 2012 - 18:30

    Merci du partage, c'est chouette comme truc ça. =D
    Anonymous
    Invité

    Lun 31 Déc 2012 - 19:18

    Merci, ça faisait longtemps que je voulais savoir comment en faire une !
    Ohani
    Ohani
    FémininAge : 37Messages : 43

    Ven 4 Jan 2013 - 5:39

    Trop beau, merci *-*



    Faire Une Lettrine - Page 18 Signizt
    Eques
    Eques
    MasculinAge : 27Messages : 109

    Ven 4 Jan 2013 - 21:09

    S'il-vous plait :)
    Waza
    Waza
    FémininAge : 103Messages : 177

    Lun 7 Jan 2013 - 1:03

    Merci ^^
    Elwana
    Elwana
    FémininAge : 27Messages : 42

    Mar 8 Jan 2013 - 17:28

    Merci ^^
    Mraw'
    Mraw'
    FémininAge : 29Messages : 18

    Mer 9 Jan 2013 - 18:07

    Merci ! :3
    Ange09
    Ange09
    FémininAge : 32Messages : 66

    Mer 9 Jan 2013 - 19:46

    Merci pour le tuto !
    Mao
    Mao
    FémininAge : 26Messages : 6

    Jeu 10 Jan 2013 - 18:33

    Merci beaucoup, c'est quand même super classe les lettrines ! o/
    Panda
    Panda
    FémininAge : 23Messages : 4

    Ven 11 Jan 2013 - 18:46

    Thanks
    Ichigo25
    Ichigo25
    Age : 35Messages : 23

    Lun 14 Jan 2013 - 17:19

    Merci pour le tuto.
    Zeloo
    Zeloo
    FémininAge : 27Messages : 65

    Sam 19 Jan 2013 - 0:14

    Merci beaucoup /O/



    Faire Une Lettrine - Page 18 0110
    Gugo
    Gugo
    MasculinAge : 91Messages : 28

    Sam 19 Jan 2013 - 22:09

    Merci ! :3
    Rhéa
    Rhéa
    FémininAge : 28Messages : 57

    Lun 21 Jan 2013 - 17:36

    Merci ! Pour donner un style aux RPs ou aux fiches RPs c'est vraiment pas mal !

    Merci ;P
    avatar
    Dreamland
    FémininAge : 34Messages : 149

    Mer 23 Jan 2013 - 17:18

    Merci :)
    Graph
    Graph"X"
    MasculinAge : 38Messages : 268

    Mer 23 Jan 2013 - 17:27

    merci ^^



    Faire Une Lettrine - Page 18 906554signaturegraphXAnonymous
    Faire Une Lettrine - Page 18 3150065406_1_2_RyY9oMWP
    Faire Une Lettrine - Page 18 3150229838_1_2_05FjnHrV
    Mon forum Reptile:

    Smikyou
    Smikyou
    FémininAge : 30Messages : 85

    Jeu 24 Jan 2013 - 16:19

    merci
    Léoshadow
    Léoshadow
    MasculinAge : 25Messages : 47

    Lun 28 Jan 2013 - 6:51

    Merci Very Happy



    Mon texte Very Happy
    Yuuki-Chan
    Yuuki-Chan
    FémininAge : 27Messages : 148

    Lun 28 Jan 2013 - 10:59

    Marchi ! :3
    Linky
    Linky
    FémininAge : 33Messages : 30

    Dim 3 Fév 2013 - 16:59

    mercii ^^
    Clémy
    Clémy
    FémininAge : 36Messages : 29

    Lun 4 Fév 2013 - 19:32

    Merci! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Mai 2024 - 20:48