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.

-28%
Le deal à ne pas rater :
Précommande : Smartphone Google Pixel 8a 5G Double Sim 128Go ...
389 € 539 €
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 12 CKMiDeikSo
    June-T.
    June-T.
    FémininAge : 25Messages : 6

    Mer 7 Mar 2012 - 18:51

    Merci j'adore le résultat :)
    Morphine.
    Morphine.
    FémininAge : 33Messages : 41

    Mer 7 Mar 2012 - 19:32

    Intéressant =)
    Merchi



    Faire Une Lettrine - Page 12 30st6
    jean44
    jean44
    Messages : 15

    Jeu 8 Mar 2012 - 18:30

    merci
    Shimura
    Shimura
    FémininAge : 30Messages : 32

    Ven 9 Mar 2012 - 1:25

    Mercii pour l'astuce ;D
    BlackNight
    BlackNight
    MasculinAge : 36Messages : 90

    Mar 13 Mar 2012 - 1:34

    bouh non ?

    Very Happy
    Riingo
    Riingo
    FémininAge : 27Messages : 17

    Mar 13 Mar 2012 - 20:03

    "Magique" !! \o/ Bah quoi, fallait dire le mot "magique", non ? 8D *sort*
    S'il te plaît, et merci d'avance, c'est très joli ^-^
    Pontos
    Pontos
    MasculinAge : 30Messages : 23

    Jeu 15 Mar 2012 - 1:23

    Merci pour le tutoriel!
    Candy †
    Candy †
    FémininAge : 27Messages : 43

    Ven 16 Mar 2012 - 18:09

      Merci d'avance Very Happy
    Ashark
    Ashark
    MasculinAge : 33Messages : 35

    Sam 17 Mar 2012 - 0:32

    Merci



    Faire Une Lettrine - Page 12 120120055546658471
    avatar
    Stargazer
    FémininAge : 30Messages : 7

    Jeu 22 Mar 2012 - 10:06

    Merci!
    Arrogant Mischief
    Arrogant Mischief
    MasculinAge : 28Messages : 70

    Ven 23 Mar 2012 - 19:44

    Merci, original.



    Faire Une Lettrine - Page 12 Nu211
    Killer78
    Killer78
    MasculinAge : 25Messages : 73

    Ven 23 Mar 2012 - 23:00

    Sitiplé, merci. ^^
    expresso
    expresso
    FémininAge : 30Messages : 4

    Dim 25 Mar 2012 - 14:08

    merci beaucoup pour ce code!
    Miru-pu
    Miru-pu
    FémininAge : 31Messages : 12

    Dim 25 Mar 2012 - 15:10

    s'il te plaiiit
    Anonymous
    Invité

    Dim 25 Mar 2012 - 15:14

    Merci beaucoup!^^
    Velasta
    Velasta
    FémininAge : 34Messages : 34

    Lun 26 Mar 2012 - 20:28

    Merci pour l'astuce
    Togira Ikonoka
    Togira Ikonoka
    MasculinAge : 24Messages : 132

    Mar 27 Mar 2012 - 1:46

    Ah merci, j'veux bien savoir comment faire :)



    BlooDy-Nightmare
    BlooDy-Nightmare
    MasculinAge : 34Messages : 11

    Mar 27 Mar 2012 - 20:07

    Merci beaucoup :)
    Kisuke.U
    Kisuke.U
    MasculinAge : 26Messages : 66

    Ven 30 Mar 2012 - 8:37

    C à l'aire pas mal ça :) Merci :)



    Faire Une Lettrine - Page 12 649969Laggron2
    Lamia
    Lamia
    FémininAge : 28Messages : 154

    Sam 31 Mar 2012 - 13:17

    merci!
    miss69
    miss69
    FémininAge : 40Messages : 40

    Mer 4 Avr 2012 - 2:06

    Je trouve ça très joli, merci :)
    Zillouh
    Zillouh
    FémininAge : 32Messages : 43

    Jeu 5 Avr 2012 - 20:09

    Merci !
    Rin Nikky
    Rin Nikky
    FémininAge : 25Messages : 37

    Jeu 5 Avr 2012 - 20:57

    je veux voir ** merci!
    Emelka
    Emelka
    MasculinAge : 27Messages : 233

    Ven 6 Avr 2012 - 20:48

    Le mot magique ? Bah, s'teplait. :p



    Faire Une Lettrine - Page 12 533538voilivoilou
    Erebe
    Erebe
    FémininAge : 30Messages : 25

    Ven 6 Avr 2012 - 23:09

    I want see *^*
    Contenu sponsorisé


      La date/heure actuelle est Ven 10 Mai 2024 - 13:44