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 à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
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 26 CKMiDeikSo
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Dim 19 Avr 2015 - 23:40

    merci pour voir :)



    Patricia :)
    Ben
    Ben
    MasculinAge : 30Messages : 773

    Lun 20 Avr 2015 - 10:49

    merci ! :)



    Faire Une Lettrine - Page 26 I1069565_signatureInglouriousBasterds
    • || A Basterd's work is never done || •

    • || ° Ben's Picture ° || •
    SerenaSo
    SerenaSo
    FémininAge : 52Messages : 6

    Mer 22 Avr 2015 - 14:24

    Merci :)
    KoalaBzh9
    KoalaBzh9
    FémininAge : 24Messages : 54

    Sam 2 Mai 2015 - 18:57

    Merci Very Happy !!
    Beaucoup même !
    SIXE
    SIXE
    FémininAge : 32Messages : 39

    Mer 6 Mai 2015 - 17:09

    Pourquoi n'ai-je pas vu ce tutoriel hier ? :o
    Merci beaucoup !
    Pikabouh
    Pikabouh
    FémininAge : 22Messages : 123

    Mar 19 Mai 2015 - 20:42

    Chiteplait ♥
    Et pis merkiii ♥
    cheeky monkey.
    cheeky monkey.
    FémininAge : 32Messages : 12

    Ven 22 Mai 2015 - 22:11

    Il me tarde de voir ce petit tutoriel. (a) merci beaucoup. (: (a)
    Anonymous
    Invité

    Mar 26 Mai 2015 - 15:19

    Merci beaucoup ! Je cherchais justement cela depuis un petit bout de temps =D
    avatar
    Cerise3
    FémininAge : 31Messages : 5

    Ven 29 Mai 2015 - 20:54

    Merci =D
    Cherry'
    Cherry'
    FémininAge : 30Messages : 70

    Ven 29 Mai 2015 - 22:44

    Merci à toi ! :)
    rom4ne
    rom4ne
    FémininAge : 23Messages : 16

    Mar 16 Juin 2015 - 20:47

    Merci! :ange:
    Sleepy
    Sleepy
    MasculinAge : 29Messages : 60

    Ven 26 Juin 2015 - 19:45

    Pile ce que je cherchais *-* Merci !



    Faire Une Lettrine - Page 26 Sig_ne10
    Youp
    Youp
    FémininAge : 29Messages : 579

    Sam 11 Juil 2015 - 23:35

    Merciiiiiii, je vais l'utiliser pour le "y'a de l'ambiance" actuel



    Faire Une Lettrine - Page 26 262632clip20160315at092522
    Harleen Quinzel
    Harleen Quinzel
    FémininAge : 28Messages : 65

    Ven 17 Juil 2015 - 19:33

    Merci !
    Aiolosly
    Aiolosly
    FémininAge : 25Messages : 110

    Dim 16 Aoû 2015 - 14:56

    Merciii !



    Faire Une Lettrine - Page 26 Lonehelena_signa
    lulunoir
    lulunoir
    FémininAge : 21Messages : 15

    Mar 18 Aoû 2015 - 10:24

    Merci d'avance pour ton tuto ♥
    EOS
    EOS
    MasculinAge : 31Messages : 34

    Jeu 27 Aoû 2015 - 16:42

    Merci
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Ven 28 Aoû 2015 - 3:07

    Merci beaucoup !! ham2
    Tortouya
    Tortouya
    FémininAge : 28Messages : 9

    Mar 1 Sep 2015 - 5:41

    Merci d'avance pour ce tuto' (:
    Xavier Grey
    Xavier Grey
    MasculinAge : 26Messages : 19

    Dim 20 Sep 2015 - 18:26

    Je suis curieux d'apprendre ce petit tour.



    Faire Une Lettrine - Page 26 330257takeitorleaveit
    ChaeRin
    ChaeRin
    FémininAge : 26Messages : 10

    Sam 3 Oct 2015 - 18:29

    Mercii!
    Jinny
    Jinny
    FémininAge : 39Messages : 253

    Dim 4 Oct 2015 - 1:57

    Marchi ! ^^



    Faire Une Lettrine - Page 26 150823030130616109
    CaptainLove
    CaptainLove
    MasculinAge : 25Messages : 14

    Lun 5 Oct 2015 - 21:33

    Merci



    Faire Une Lettrine - Page 26 449196Modoforumsigna
    Nishiki
    Nishiki
    FémininAge : 26Messages : 325

    Lun 19 Oct 2015 - 14:34

    merci



    Faire Une Lettrine - Page 26 Head19
    yukiyuki
    yukiyuki
    FémininAge : 29Messages : 89

    Jeu 19 Nov 2015 - 21:22

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:25