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 : -50%
[Adhérents Fnac] -50% Casque Pro Gaming HyperX ...
Voir le deal
49.99 €

    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 2 CKMiDeikSo
    SWAN♦ADDICTION
    SWAN♦ADDICTION
    FémininAge : 33Messages : 6

    Lun 25 Avr 2011 - 15:16

    merci.
    Louka
    Louka
    FémininAge : 29Messages : 5

    Lun 25 Avr 2011 - 18:36

    Merci d'avance *0*
    Slem
    Slem
    FémininAge : 27Messages : 541

    Lun 25 Avr 2011 - 18:37

    Merci =)



    Faire Une Lettrine - Page 2 Coursb21
    Sign & Ava by me, don't touch please. (je signe également Yoshi)
    Skunk
    Skunk
    MasculinAge : 35Messages : 268

    Mer 27 Avr 2011 - 14:57

    Merki :)



    Faire Une Lettrine - Page 2 Sign4v
    avatar
    HBlack
    MasculinAge : 28Messages : 8

    Jeu 28 Avr 2011 - 16:54

    Merci d'avance. (:
    Crunshiii
    Crunshiii
    FémininAge : 25Messages : 58

    Mar 10 Mai 2011 - 20:11

    Merci d'avance. :3
    liline
    liline
    FémininAge : 32Messages : 15

    Jeu 12 Mai 2011 - 18:05

    Merci ♥
    Kazeigan Gutari
    Kazeigan Gutari
    MasculinAge : 29Messages : 67

    Jeu 12 Mai 2011 - 19:51

    merci beaucoup pour le tuto Wink
    Orkais
    Orkais
    FémininAge : 31Messages : 118

    Dim 15 Mai 2011 - 22:09

    Merci par avaaance Very Happy



    "A lot of people say you need love to live. Oxygen is even more important..."
    Margii
    Margii
    FémininAge : 26Messages : 84

    Dim 15 Mai 2011 - 22:31

    Je veux apprendre *o* !
    Merci d'avance ;D
    Hypnos
    Hypnos
    MasculinAge : 28Messages : 43

    Dim 15 Mai 2011 - 22:36

    S'il te plait ?



    Faire Une Lettrine - Page 2 71654275
    © Insomnia
    © Insomnia
    FémininAge : 33Messages : 18

    Jeu 19 Mai 2011 - 11:43

    Merci d'avance ♥
    avatar
    Esto
    MasculinAge : 31Messages : 53

    Ven 20 Mai 2011 - 19:23

    Merci :-)
    Orange Pressée
    Orange Pressée
    FémininAge : 37Messages : 4

    Dim 22 Mai 2011 - 10:26

    Merci pour le tuto, Kazuya. Je trouve ça trop classe les lettrines.
    Jay No Shi
    Jay No Shi
    MasculinAge : 28Messages : 631

    Dim 22 Mai 2011 - 11:23

    • J'ai vraiment hâte de voir \o\ Merci Kazuya =D
    Aki'
    Aki'
    FémininAge : 28Messages : 258

    Lun 23 Mai 2011 - 8:02

    Merci, je le cherchais
    Enkyo
    Enkyo
    MasculinAge : 32Messages : 14

    Lun 23 Mai 2011 - 10:52

    Merci pour l'astuce =)
    Magiquest
    Magiquest
    MasculinAge : 28Messages : 224

    Lun 23 Mai 2011 - 13:50

    .



    Faut jamais dire que les autres sont des crétins car t'en un petit crétin, parce que tu lis ce message crétin O.o !
    Faire Une Lettrine - Page 2 Signature12
    Saky
    Saky
    FémininAge : 28Messages : 728

    Lun 23 Mai 2011 - 14:05

    Merci Kazu-neko =3



    Faire Une Lettrine - Page 2 916344JackScopy
    ~Linoa~
    ~Linoa~
    FémininAge : 46Messages : 12

    Ven 27 Mai 2011 - 20:15

    Merci !
    Ziktaon
    Ziktaon
    MasculinAge : 32Messages : 843

    Sam 28 Mai 2011 - 17:22

    Hmm cava être utile pour mon forum. Merci a toi ^^



    Faire Une Lettrine - Page 2 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Shuu-Shuu
    Shuu-Shuu
    FémininAge : 28Messages : 199

    Dim 29 Mai 2011 - 13:39

    Pratique le tuto ^^
    Daddoo
    Daddoo
    FémininAge : 34Messages : 23

    Mer 1 Juin 2011 - 23:14

    Merci :) ♥
    Shiryû
    Shiryû
    MasculinAge : 32Messages : 24

    Dim 5 Juin 2011 - 12:11

    Sympathique, merci beaucoup.
    M.T
    M.T
    FémininAge : 35Messages : 53

    Lun 6 Juin 2011 - 19:45

    Pas mal comme astuce.
    Merci.
    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 18:01