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 :
Jeux, jouets et Lego : le deuxième à -50% (large sélection)
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 13 CKMiDeikSo
    Kawel
    Kawel
    MasculinAge : 30Messages : 203

    Sam 14 Avr 2012 - 14:09

    merki Very Happy



    Faire Une Lettrine - Page 13 Dream10
    rhapsody_
    rhapsody_
    FémininAge : 41Messages : 21

    Dim 15 Avr 2012 - 0:22

    parce que je suis curieuse =)

    merci d'avance.



    Faire Une Lettrine - Page 13 Typo-ban-septembre-2cd0505
    shadowval
    shadowval
    MasculinAge : 26Messages : 134

    Dim 15 Avr 2012 - 15:06

    Merci !

    Assyn
    Assyn
    FémininAge : 29Messages : 60

    Sam 21 Avr 2012 - 11:40

    Merci :)



    Faire Une Lettrine - Page 13 795525AssynScopy
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 31Messages : 76

    Mar 24 Avr 2012 - 17:09

    Merci du partage =)



    Faire Une Lettrine - Page 13 Bannol1xj5
    BrokenDown* Heart
    BrokenDown* Heart
    FémininAge : 34Messages : 23

    Mer 25 Avr 2012 - 16:58

    Merci pour l'astuce
    Chevalier Oignon
    Chevalier Oignon
    MasculinAge : 34Messages : 60

    Mer 25 Avr 2012 - 21:48

    Oh merci ! : D
    XXB
    XXB
    MasculinAge : 30Messages : 34

    Mer 25 Avr 2012 - 21:58

    Mercii Very Happy
    Frangy
    Frangy
    FémininAge : 34Messages : 52

    Jeu 26 Avr 2012 - 23:33

    Supeeer ! Merci :)
    Tropik
    Tropik
    MasculinAge : 30Messages : 58

    Ven 27 Avr 2012 - 4:42

    merci




    lovedesign

    Zouzou
    Zouzou
    FémininAge : 25Messages : 19

    Ven 27 Avr 2012 - 15:33

    J'adore cet effet, vraiment. Merci beaucoup
    SO.BRITISH
    SO.BRITISH
    FémininAge : 32Messages : 3

    Dim 29 Avr 2012 - 20:58

    super !! Merci beaucoup **
    PaSs
    PaSs
    FémininAge : 26Messages : 10

    Sam 5 Mai 2012 - 7:24

    Merci^^
    J'adore l'effet



    Faire Une Lettrine - Page 13 Fp2u1j
    Amiyah
    Amiyah
    FémininAge : 29Messages : 47

    Dim 6 Mai 2012 - 20:26

    Je voudrais voir s'il te plait, merci =)
    Ichibari
    Ichibari
    FémininAge : 38Messages : 90

    Mer 9 Mai 2012 - 4:55

    Merci pour le tuto !!!
    Leean
    Leean
    FémininAge : 30Messages : 19

    Lun 14 Mai 2012 - 21:31

    Merci : )
    Cocow'
    Cocow'
    FémininAge : 26Messages : 11

    Dim 20 Mai 2012 - 18:16

    Ca tombe bien, je cherchais justement comment faire. Un grand merci ♥
    Elyzabeth
    Elyzabeth
    FémininAge : 31Messages : 40

    Mer 23 Mai 2012 - 15:05

    Je cherchais cette astuce, merci beaucoup =)
    Micks
    Micks
    MasculinAge : 29Messages : 72

    Ven 25 Mai 2012 - 0:06

    Merciiiiiiiiiiiiiiiii :love:



    Faire Une Lettrine - Page 13 Jared_10
    Tsubame
    Tsubame
    FémininAge : 27Messages : 2

    Sam 26 Mai 2012 - 19:19

    Thanks Very Happy
    Mamec
    Mamec
    FémininAge : 30Messages : 10

    Lun 28 Mai 2012 - 13:14

    Merci pour ce tuto ^^
    Win
    Win
    Age : 31Messages : 114

    Lun 28 Mai 2012 - 15:23

    Merci héhé! C'est vrai que ca rend classe



    Faire Une Lettrine - Page 13 Spiritxz4
    Freak
    Freak
    FémininAge : 33Messages : 27

    Ven 1 Juin 2012 - 12:03

    Merci ! ^^



    Image hébergée par servimg.com
    .Enid.
    .Enid.
    FémininAge : 30Messages : 8

    Ven 1 Juin 2012 - 17:17

    Je veux voir ça, merci :)



    :zen:
    Anonymous
    Invité

    Mar 5 Juin 2012 - 2:21

    Merci beaucoup ! :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Avr 2024 - 20:32