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 :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    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 6 CKMiDeikSo
    sanara
    sanara
    Age : 29Messages : 17

    Mar 23 Aoû 2011 - 11:46

    s'il te plait?
    lewus
    lewus
    MasculinAge : 31Messages : 4

    Mar 23 Aoû 2011 - 19:53

    please
    Laki Crowley
    Laki Crowley
    FémininAge : 34Messages : 4

    Jeu 25 Aoû 2011 - 23:51

    Merci par avance ^^
    OwO
    OwO
    FémininAge : 29Messages : 2

    Sam 27 Aoû 2011 - 1:29

    Sil te plait! :)
    Loolaa
    Loolaa
    FémininAge : 35Messages : 47

    Lun 29 Aoû 2011 - 16:06

    please



    Faire Une Lettrine - Page 6 Tumblr_m3khgdk5E11qgkzcm
    Scampy
    Scampy
    FémininAge : 30Messages : 7

    Ven 2 Sep 2011 - 20:58

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

    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 ♥)
    *Marine*
    *Marine*
    FémininAge : 33Messages : 10

    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
    Nirvelli
    Nirvelli
    FémininAge : 30Messages : 3

    Sam 10 Sep 2011 - 2:28

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

    Sam 10 Sep 2011 - 12:33

    Merci~
    Actu-One
    Actu-One
    MasculinAge : 40Messages : 20

    Dim 11 Sep 2011 - 7:11

    merci..^^



    Faire Une Lettrine - Page 6 One_si10
    Stronger
    Stronger
    MasculinAge : 30Messages : 277

    Ven 16 Sep 2011 - 3:39

    merci



    Faire Une Lettrine - Page 6 Strong13
    Nutty
    Nutty
    FémininAge : 27Messages : 17

    Dim 18 Sep 2011 - 18:32

    Merci beaucoup 8D



    Faire Une Lettrine - Page 6 Hw0rro
    JeHwa
    JeHwa
    FémininAge : 29Messages : 34

    Lun 19 Sep 2011 - 11:30

    haha. merci. ~




    Asaoka
    Asaoka
    MasculinAge : 30Messages : 1706

    Lun 19 Sep 2011 - 19:05

    Merci :) !



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

    Faire Une Lettrine - Page 6 89318_mini_bowser
    avatar
    DarkNemi
    FémininAge : 32Messages : 17

    Lun 19 Sep 2011 - 22:57

    Merci d'avanceee
    Yopa
    Yopa
    MasculinAge : 27Messages : 5

    Mar 20 Sep 2011 - 8:48

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

    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.
    avatar
    Pupuce17
    FémininAge : 27Messages : 28

    Jeu 22 Sep 2011 - 18:53

    Intéressant :] Merci.



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

    Ven 23 Sep 2011 - 23:04

    Thanks pour le tuto'



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

    Sam 24 Sep 2011 - 13:33

    merci
    objectif photo
    objectif photo
    MasculinAge : 43Messages : 54

    Sam 24 Sep 2011 - 21:25

    merci



    http://objectif-photo.forumgratuit.org/
    aFlametGirl
    aFlametGirl
    FémininAge : 33Messages : 39

    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 ♥



    최민호
    Faire Une Lettrine - Page 6 452404tumblrln2t64RPtJ1qdn2tro15001
    Milt
    Milt
    MasculinAge : 34Messages : 5

    Dim 25 Sep 2011 - 9:27

    Merci !
    Skyleen
    Skyleen
    FémininAge : 32Messages : 476

    Dim 25 Sep 2011 - 18:15

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


      La date/heure actuelle est Lun 25 Nov 2024 - 7:02