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 :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
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 19 CKMiDeikSo
    Rosalie Hale
    Rosalie Hale
    FémininAge : 30Messages : 185

    Mar 5 Fév 2013 - 22:57

    Merci du partage :)
    Databar
    Databar
    MasculinAge : 30Messages : 142

    Mer 6 Fév 2013 - 9:58

    merci
    Crown
    Crown
    MasculinAge : 28Messages : 16

    Sam 9 Fév 2013 - 18:23

    Merci beaucoup !
    Lyrasaphira
    Lyrasaphira
    FémininAge : 28Messages : 12

    Dim 10 Fév 2013 - 17:53

    Merci, c'est super ! :)




    Faire Une Lettrine - Page 19 399486LyraS


    Bonjour Invité ! :friends:
    Sonoshee
    Sonoshee
    FémininAge : 31Messages : 30

    Mer 13 Fév 2013 - 17:30

    Merci ;')



    Faire Une Lettrine - Page 19 1173378185Faire Une Lettrine - Page 19 Signat10
    Asunie
    Asunie
    FémininAge : 32Messages : 68

    Jeu 14 Fév 2013 - 16:13

    Meeeeeeerci ! Very Happy
    Cannelle
    Cannelle
    FémininAge : 50Messages : 23

    Jeu 14 Fév 2013 - 17:47

    merci



    :ship:
    Nawak
    Nawak
    FémininAge : 26Messages : 112

    Jeu 21 Fév 2013 - 1:42

    Merci!



    Faire Une Lettrine - Page 19 Umbrel10
    Atramad
    Atramad
    MasculinAge : 24Messages : 159

    Jeu 21 Fév 2013 - 1:52

    Merci ! (:



    Faire Une Lettrine - Page 19 Robert11
    Offrande
    Offrande
    FémininAge : 33Messages : 194

    Jeu 21 Fév 2013 - 19:22

    Mots magic " Merci ^^ du partage =)
    katia06
    katia06
    FémininAge : 55Messages : 203

    Ven 22 Fév 2013 - 13:33

    ça doit être sympa, merci



    lapinou-doux
    lapinou-doux
    FémininAge : 23Messages : 56

    Sam 23 Fév 2013 - 21:03

    Merci :)
    Katanax
    Katanax
    MasculinAge : 33Messages : 3

    Dim 24 Fév 2013 - 23:47

    Merci l'ami :)
    Arthuragon
    Arthuragon
    MasculinAge : 26Messages : 61

    Lun 25 Fév 2013 - 9:21

    Merciiii
    Isalia
    Isalia
    FémininAge : 24Messages : 125

    Lun 4 Mar 2013 - 14:36

    Merci =3
    Souky Mitsu
    Souky Mitsu
    FémininAge : 33Messages : 124

    Lun 4 Mar 2013 - 17:57

    Merci ! cheers
    Mii
    Mii
    FémininAge : 25Messages : 8

    Lun 4 Mar 2013 - 23:24

    Merci d'avance.~
    Iriel
    Iriel
    MasculinAge : 32Messages : 26

    Sam 9 Mar 2013 - 16:59

    Merci Very Happy.
    Anonymous
    Invité

    Sam 9 Mar 2013 - 21:59

    Merci !
    Offrande
    Offrande
    FémininAge : 33Messages : 194

    Sam 9 Mar 2013 - 22:43

    Sa vas être magnifique sur mon forum, merci beaucoup Very Happy
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Dim 10 Mar 2013 - 19:36

    Merci
    Jar Jar Binks
    Jar Jar Binks
    MasculinAge : 27Messages : 6

    Sam 16 Mar 2013 - 0:09

    Merci d'avance Very Happy
    carlingot
    carlingot
    MasculinAge : 26Messages : 10

    Dim 17 Mar 2013 - 21:51

    Merci!
    Tsuki Matsu
    Tsuki Matsu
    FémininAge : 30Messages : 64

    Jeu 21 Mar 2013 - 3:23

    Merciii ^^



    Faire Une Lettrine - Page 19 Signan10
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Sam 23 Mar 2013 - 12:49

    Merkiii <3



    "Espérer l'inespérable c'est croire en l'impossible."
    Contenu sponsorisé


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