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 : -28%
Brandt LVE127J – Lave-vaisselle encastrable 12 ...
Voir le deal
279.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 5 CKMiDeikSo
    Hancock
    Hancock
    MasculinAge : 32Messages : 15

    Sam 23 Juil 2011 - 19:29

    Cool merciii Kazuya :)



    35e Régiment d'Infanterie..
    noheyla
    noheyla
    FémininAge : 28Messages : 6

    Lun 25 Juil 2011 - 15:15

    Ca doit rendre vraiment bien sur un début de contexte. Merci :michi2:
    ThePrinz
    ThePrinz
    FémininAge : 28Messages : 12

    Lun 25 Juil 2011 - 18:39

    merci ^^
    Sachi
    Sachi
    FémininAge : 30Messages : 50

    Mar 26 Juil 2011 - 8:33

    merci ♥
    Romuald
    Romuald
    MasculinAge : 27Messages : 33

    Mar 26 Juil 2011 - 11:08

    Je peux avoir l'astuce stp^^ ?
    Merci d'avance Razz
    QueenDancing13
    QueenDancing13
    FémininAge : 27Messages : 106

    Mer 27 Juil 2011 - 14:18

    Ah je veux voir s'il te plait ^^



    Faire Une Lettrine - Page 5 Christina_Aguilera_Signature_by_Sitic
    Ectra
    Ectra
    MasculinAge : 32Messages : 29

    Ven 29 Juil 2011 - 15:22

    Mercii! =D
    Tarada
    Tarada
    MasculinAge : 31Messages : 15

    Dim 31 Juil 2011 - 1:32

    Je veux voir, merci Very Happy.
    carotteetbambie
    carotteetbambie
    FémininAge : 34Messages : 3

    Dim 31 Juil 2011 - 1:35

    Super !!!
    Amera
    Amera
    FémininAge : 31Messages : 67

    Dim 31 Juil 2011 - 2:05

    Aah, merci d'avance !
    Lennon
    Lennon
    FémininAge : 28Messages : 14

    Dim 31 Juil 2011 - 15:32

    Merchiiii
    StyloPlume
    StyloPlume
    FémininAge : 26Messages : 5

    Mar 2 Aoû 2011 - 1:41

    merci
    Kidon
    Kidon
    MasculinAge : 30Messages : 70

    Jeu 4 Aoû 2011 - 19:50

    Le mot magique ? Lequel ? Rolling Eyes =P

    S'il vous plait ou Abracadabra ? x)

    Oups c'est merci ? MERCI !
    ♦ Mari-Jane
    ♦ Mari-Jane
    FémininAge : 31Messages : 39

    Jeu 4 Aoû 2011 - 21:10

    Merci pour cette astuce Very Happy
    Mxt
    Mxt
    MasculinAge : 31Messages : 5

    Dim 7 Aoû 2011 - 1:59

    Merci Wink



    Faire Une Lettrine - Page 5 904466uzumaki
    Elodie potter
    Elodie potter
    FémininAge : 36Messages : 106

    Jeu 11 Aoû 2011 - 16:24

    S'il vous plait, merci :)
    Doo
    Doo
    FémininAge : 32Messages : 42

    Ven 12 Aoû 2011 - 14:06

      Merci Kazuya, j'aime énormément le rendu Very Happy
    Leila
    Leila
    FémininAge : 34Messages : 30

    Sam 13 Aoû 2011 - 21:43

    D'abord : S'il te plait =)
    Et ensuite merci =D
    Che'
    Che'
    MasculinAge : 29Messages : 9

    Dim 14 Aoû 2011 - 15:04

    Merci pour ce tuto Wink
    Hiro
    Hiro
    MasculinAge : 40Messages : 131

    Dim 14 Aoû 2011 - 15:07




    Faire Une Lettrine - Page 5 Ep44874ipiccy
    Faire Une Lettrine - Page 5 Sansrehl
    meteorshower.
    meteorshower.
    FémininAge : 29Messages : 13

    Jeu 18 Aoû 2011 - 23:40

    merci d'avance (:





    Que cette journée reste à jamais celle où vous avez failli capturer le capitain Jack Sparrow !
    Yelonia
    Yelonia
    FémininAge : 29Messages : 46

    Ven 19 Aoû 2011 - 0:52

    S'il te plait? (:
    Tsuzumi
    Tsuzumi
    FémininAge : 28Messages : 14

    Ven 19 Aoû 2011 - 2:51

    Merci !



    Spoiler:
    patate_masquey
    patate_masquey
    MasculinAge : 30Messages : 73

    Sam 20 Aoû 2011 - 23:16

    Merci !
    Valiane
    Valiane
    FémininAge : 31Messages : 289

    Lun 22 Aoû 2011 - 17:49

    s'il vous plaaaaaaaaaaaît :)



    Faire Une Lettrine - Page 5 Valrose2
    Contenu sponsorisé


      La date/heure actuelle est Ven 3 Mai 2024 - 2:48