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.


    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 10 CKMiDeikSo
    Miki Rei
    Miki Rei
    FémininAge : 29Messages : 8

    Lun 9 Jan 2012 - 18:18

    Oh, ça a l'air zoli. Merci du partage ! ♥
    coeurdelait
    coeurdelait
    FémininAge : 45Messages : 18

    Mar 10 Jan 2012 - 9:14

    merci beaucoup
    Dr. Karlos
    Dr. Karlos
    MasculinAge : 29Messages : 14

    Ven 13 Jan 2012 - 4:41

    Et bah merci!
    Ellone
    Ellone
    FémininAge : 32Messages : 28

    Ven 13 Jan 2012 - 20:41

    Merci d'avance! =D



    Gone for far away.

    Faire Une Lettrine - Page 10 49837113b_copie
    faleor
    faleor
    MasculinAge : 35Messages : 13

    Sam 14 Jan 2012 - 2:27

    si c'est simple je prend!
    Melon ♫
    Melon ♫
    FémininAge : 30Messages : 19

    Sam 14 Jan 2012 - 9:49

    Merci
    Lolymysay
    Lolymysay
    FémininAge : 29Messages : 11

    Mer 18 Jan 2012 - 21:58

    Oh c'est cool comme effet ! Merci beaucoup ! :)
    {Appolo-polochon}
    {Appolo-polochon}
    FémininAge : 29Messages : 14

    Ven 20 Jan 2012 - 2:20

    Aller moi je l'ai le mot magique !

    Merchii ham3

    EDIT: Ahhh non j'y arrive pas :michi6:
    Halibel
    Halibel
    MasculinAge : 30Messages : 31

    Ven 20 Jan 2012 - 7:28

    merci du partage ^^"



    Faire Une Lettrine - Page 10 480095HalibelDtruitTiburn2
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Ven 20 Jan 2012 - 9:49

    Merci
    Anonymous
    Invité

    Sam 21 Jan 2012 - 21:35

    Merci beaucoup !
    darkhero246
    darkhero246
    MasculinAge : 32Messages : 179

    Mer 25 Jan 2012 - 22:23

    Merci pour l'astuce c'est bien pratique pour les contextes Wink
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Jeu 26 Jan 2012 - 17:08

    merci
    ( Lou' )
    ( Lou' )
    FémininAge : 29Messages : 108

    Jeu 26 Jan 2012 - 21:13

    Merci d'avance ♥
    Frangy
    Frangy
    FémininAge : 35Messages : 52

    Jeu 26 Jan 2012 - 22:41

    Merci Very Happy
    CathyCréation
    CathyCréation
    FémininAge : 45Messages : 207

    Dim 29 Jan 2012 - 5:20

    merci
    Cyn-Tutti
    Cyn-Tutti
    FémininAge : 34Messages : 12

    Mar 31 Jan 2012 - 0:44

    Merci!!! :)
    Yusei Hôji
    Yusei Hôji
    MasculinAge : 33Messages : 71

    Mar 31 Jan 2012 - 23:48

    ça peut toujours être sympa ^^ Merci :)
    Ladypop
    Ladypop
    FémininAge : 32Messages : 18

    Mer 1 Fév 2012 - 17:25

    Merci♥
    Anonymous
    Invité

    Mer 1 Fév 2012 - 21:30

    Merci pour le partage :)
    Lightkira
    Lightkira
    FémininAge : 28Messages : 32

    Jeu 2 Fév 2012 - 3:12

    merci :)
    Nashii
    Nashii
    FémininAge : 34Messages : 530

    Sam 4 Fév 2012 - 14:28

    merci :3



    Faire Une Lettrine - Page 10 1201210924441364249329257Faire Une Lettrine - Page 10 1201210924451364249329258Faire Une Lettrine - Page 10 1202111115401364249422987Faire Une Lettrine - Page 10 1202111115401364249422988
    http://captain-pullip.forumgratuit.org/

    avatar
    Miyoshi
    FémininAge : 30Messages : 54

    Dim 5 Fév 2012 - 18:17

    Merci d'avance ! :3
    Calistes Terra
    Calistes Terra
    FémininAge : 28Messages : 14

    Dim 5 Fév 2012 - 22:36

    Justement je cherchais cela !
    (On trouve tout ici c'est dingue). Merci à toi :'D.
    Ev'
    Ev'
    FémininAge : 32Messages : 131

    Dim 5 Fév 2012 - 23:13

    Astuce qui fait ma foi très classe !



    Faire Une Lettrine - Page 10 Signatureev
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 0:57