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 : -40%
Tefal Ingenio Emotion – Batterie de cuisine 10 ...
Voir le deal
59.99 €

    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 8 CKMiDeikSo
    Jessicat322
    Jessicat322
    FémininAge : 31Messages : 32

    Mar 15 Nov 2011 - 18:04

    Je peux voir ?
    Nami
    Nami
    FémininAge : 31Messages : 143

    Sam 19 Nov 2011 - 18:04

    Je veux voir *-* (merci)
    Roule_Aspara
    Roule_Aspara
    MasculinAge : 28Messages : 255

    Sam 19 Nov 2011 - 20:30

    Merci beaucoup ^^



    Faire Une Lettrine - Page 8 Onfire[/center]
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Sam 19 Nov 2011 - 23:33

    Merci !
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 20 Nov 2011 - 0:43

    Un Bon tuto, j'en suis persuadé :) !
    Merci beaucoup Wink

    Taktiik.

    Crazy-GuirL
    Crazy-GuirL
    FémininAge : 29Messages : 91

    Dim 20 Nov 2011 - 13:54

    Je ne sais pas encore ce que sais, mais je serais ravis de voir ce que c'est =)
    Mademoiselle Xina
    Mademoiselle Xina
    FémininAge : 30Messages : 20

    Lun 21 Nov 2011 - 21:54

    Merci pour le tuto <3
    Origami
    Origami
    MasculinAge : 29Messages : 22

    Lun 21 Nov 2011 - 22:04

    J'aimerai bien voir
    Ansuz
    Ansuz
    MasculinAge : 33Messages : 55

    Lun 21 Nov 2011 - 22:32

    Merci :) pour ce savoir Wink

    Je te ferais bien un bisou mais je réserves cela aux fillex, à la place je te donne un billet pour le concert de Justin Bieber xD. *Donne le billet*
    avatar
    AQW
    FémininAge : 29Messages : 225

    Jeu 24 Nov 2011 - 0:51

    Merci, je cherchais à faire ça depuis quelques temps en plus ^^
    Loris74
    Loris74
    MasculinAge : 34Messages : 11

    Dim 27 Nov 2011 - 12:03

    Merci
    Lëwen
    Lëwen
    FémininAge : 29Messages : 24

    Dim 27 Nov 2011 - 15:41

    S'il te plaiiiiit *w* ensuite y'a merciiii *µ*
    Linker22~
    Linker22~
    MasculinAge : 25Messages : 215

    Dim 27 Nov 2011 - 17:00

    Steuplai :)



    Faire Une Lettrine - Page 8 896610SignLinker22
    Ravener
    Ravener
    FémininAge : 33Messages : 193

    Lun 28 Nov 2011 - 2:47

    Grand merci pour cette astuce =D
    Edel
    Edel
    FémininAge : 31Messages : 378

    Jeu 1 Déc 2011 - 2:28

    Merci beaucoup pour le tuto !!!



    Mon métier et mon art, c'est vivre - Montaigne
    Shin Minate
    Shin Minate
    MasculinAge : 29Messages : 83

    Jeu 1 Déc 2011 - 14:59

    Merci ! :)



    Faire Une Lettrine - Page 8 Mupp
    Sacha Chan
    Sacha Chan
    FémininAge : 25Messages : 21

    Ven 2 Déc 2011 - 18:06

    Super, ça rend un super effet, merci (:


    EDIT : Je n'y arrive pas :/
    Moriarty
    Moriarty
    FémininAge : 28Messages : 85

    Sam 3 Déc 2011 - 16:06

    Thanks !
    xElise
    xElise
    FémininAge : 28Messages : 10

    Dim 4 Déc 2011 - 14:53

    Merci pour l'astuce! :)
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Mar 6 Déc 2011 - 16:13

    merci =)
    Spooki'
    Spooki'
    FémininAge : 28Messages : 13

    Mer 7 Déc 2011 - 15:38

    MIaaaw Very Happy
    Merci. :love:
    iMCBz
    iMCBz
    MasculinAge : 34Messages : 12

    Mer 7 Déc 2011 - 16:30

    merci beaucoup
    Nightwing
    Nightwing
    FémininAge : 31Messages : 72

    Mer 7 Déc 2011 - 23:27

    Le mot magique c'est "s'il te plait" ?
    Ehlana
    Ehlana
    FémininAge : 35Messages : 43

    Jeu 8 Déc 2011 - 12:00

    S'il te plait, merci ! Very Happy
    Sunday.Girl™
    Sunday.Girl™
    FémininAge : 30Messages : 14

    Dim 11 Déc 2011 - 14:07

    merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 10 Mai 2024 - 9:17