AccueilFAQRechercherMembresGroupesS'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

    Partagez
    avatar
    Kazuya
    MasculinAge : 25Messages : 1497

    le 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



    avatar
    sanara
    Age : 22Messages : 17

    le Mar 23 Aoû 2011 - 11:46

    s'il te plait?
    avatar
    lewus
    MasculinAge : 24Messages : 4

    le Mar 23 Aoû 2011 - 19:53

    please
    avatar
    Laki Crowley
    FémininAge : 27Messages : 4

    le Jeu 25 Aoû 2011 - 23:51

    Merci par avance ^^
    avatar
    OwO
    FémininAge : 22Messages : 2

    le Sam 27 Aoû 2011 - 1:29

    Sil te plait! :)
    avatar
    Loolaa
    FémininAge : 28Messages : 45

    le Lun 29 Aoû 2011 - 16:06

    please



    avatar
    Scampy
    FémininAge : 23Messages : 7

    le Ven 2 Sep 2011 - 20:58

    Je veux voir.
    Merci beaucoup :)
    avatar
    Aravis Thelan
    FémininAge : 28Messages : 33

    le Jeu 8 Sep 2011 - 17:03

    ça c'est bien pratique ^^ Je veux savoir s'il te plait ♥

    Merci pour cette explication (en avance oui, mais c'est trop bien les Lettrines ♥)
    avatar
    *Marine*
    FémininAge : 26Messages : 10

    le Ven 9 Sep 2011 - 18:05

    Han j'y avais jamais pensée mais après avoir lu l'explication ça peut être trop classe *O*
    Moi aussi veux voir * s'il te plais * Very Happy
    avatar
    Nirvelli
    FémininAge : 23Messages : 3

    le Sam 10 Sep 2011 - 2:28

    Merci =D
    avatar
    Kimi-Shi
    FémininAge : 20Messages : 11

    le Sam 10 Sep 2011 - 12:33

    Merci~
    avatar
    Actu-One
    MasculinAge : 33Messages : 20

    le Dim 11 Sep 2011 - 7:11

    merci..^^




    avatar
    Stronger
    MasculinAge : 23Messages : 277

    le Ven 16 Sep 2011 - 3:39

    merci



    avatar
    Nutty
    FémininAge : 20Messages : 17

    le Dim 18 Sep 2011 - 18:32

    Merci beaucoup 8D



    avatar
    JeHwa
    FémininAge : 22Messages : 34

    le Lun 19 Sep 2011 - 11:30

    haha. merci. ~




    avatar
    Asaoka
    MasculinAge : 23Messages : 1706

    le Lun 19 Sep 2011 - 19:05

    Merci :) !



    Ex-Chasseur d'image, ex-Responsable N-U Games.
    Habitant du navire depuis le 07/01/2008


    DarkNemi
    FémininAge : 25Messages : 17

    le Lun 19 Sep 2011 - 22:57

    Merci d'avanceee
    avatar
    Yopa
    MasculinAge : 20Messages : 5

    le Mar 20 Sep 2011 - 8:48

    Je test .....S'il vous plaît monsieur ?
    avatar
    Kirya.
    FémininAge : 18Messages : 20

    le Mar 20 Sep 2011 - 19:43

    Oh c'est cool comme code, merci. Very Happy
    Par contre, on peut changer la couleur? Et bien je vais aller voir ça tout de suite 8B.
    Pupuce17
    FémininAge : 20Messages : 28

    le Jeu 22 Sep 2011 - 18:53

    Intéressant :] Merci.



    Panda panda panda !! : P I love Panda x)
    avatar
    Del
    MasculinMessages : 110

    le Ven 23 Sep 2011 - 23:04

    Thanks pour le tuto'



    « Run you clever boy and remember... »
    avatar
    Hybris
    MasculinAge : 30Messages : 308

    le Sam 24 Sep 2011 - 13:33

    merci
    avatar
    objectif photo
    MasculinAge : 36Messages : 54

    le Sam 24 Sep 2011 - 21:25

    merci

    avatar
    aFlametGirl
    FémininAge : 26Messages : 39

    le Dim 25 Sep 2011 - 1:14

    Bonsoiiir ! =D
    Pourrais-je avoir le codage aussi s'il vous plaît ? Il m'a l'air vraiment super et pratique pour faire un bel effet dans le texte *o*
    Merci d'avance ♥



    최민호
    avatar
    Milt
    MasculinAge : 27Messages : 5

    le Dim 25 Sep 2011 - 9:27

    Merci !
    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Dim 25 Sep 2011 - 18:15

    Ce code m'interesse beaucoup. Merci beaucoup pour le partage :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Nov 2017 - 5:43