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 : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

    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 24 CKMiDeikSo
    Jawilsia
    Jawilsia
    FémininAge : 31Messages : 143

    Lun 9 Juin 2014 - 10:59

    Merci pour cette astuce Very Happy
    Glow
    Glow
    FémininAge : 24Messages : 94

    Mer 18 Juin 2014 - 17:14

    Merci :3
    Nanou0001
    Nanou0001
    FémininAge : 39Messages : 50

    Ven 20 Juin 2014 - 8:19

    merci
    Toonsi
    Toonsi
    MasculinAge : 25Messages : 40

    Lun 23 Juin 2014 - 21:22

    SILVOUPLAIT MDR
    narakye
    narakye
    FémininAge : 30Messages : 503

    Lun 23 Juin 2014 - 21:29

    merci =)
    John Parker
    John Parker
    MasculinAge : 41Messages : 58

    Ven 27 Juin 2014 - 15:33

    Merci beaucoup pour l'astuce ^^



    Faire Une Lettrine - Page 24 Ange_s10
    Noizy.
    Noizy.
    MasculinAge : 25Messages : 43

    Ven 27 Juin 2014 - 16:27

    Merci
    Miss Snow
    Miss Snow
    FémininAge : 24Messages : 56

    Sam 5 Juil 2014 - 11:45

    Merci, ça va m'être bien utile ^^



    Faire Une Lettrine - Page 24 333359CommandeMissSnowsigna
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Lun 7 Juil 2014 - 14:40

    Merchi bien, j'ai très envie de voir l'astuce *.*
    avatar
    Phénix'
    FémininAge : 22Messages : 95

    Mer 9 Juil 2014 - 16:32

    merci^^
    Kim Jae Yoon
    Kim Jae Yoon
    FémininAge : 33Messages : 128

    Jeu 10 Juil 2014 - 10:17

    Sympas comme astuce ! Merci Very Happy
    Ay.am.e
    Ay.am.e
    FémininAge : 25Messages : 123

    Sam 12 Juil 2014 - 22:12

    Merci !
    Rynkka
    Rynkka
    FémininAge : 25Messages : 120

    Dim 20 Juil 2014 - 20:55

    Merci les enfants! //SPAAN//



    Faire Une Lettrine - Page 24 48861711
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Lun 21 Juil 2014 - 15:43

    Merci ^^
    Cupcake-11
    Cupcake-11
    FémininAge : 26Messages : 31

    Lun 4 Aoû 2014 - 19:25

    Merci ♥
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Sam 16 Aoû 2014 - 17:37

    Mici !!



    Faire Une Lettrine - Page 24 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    Diabolik
    Diabolik
    FémininAge : 27Messages : 18

    Mer 20 Aoû 2014 - 11:27

    Merci :3
    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Jeu 28 Aoû 2014 - 18:29

    Merci
    The Mad Hatter
    The Mad Hatter
    MasculinAge : 29Messages : 38

    Mer 10 Sep 2014 - 20:36

    Merci pour l’astuce! :') Je trouve ça très jolie sur un contexte!



    Le meilleur moyen de réaliser l’impossible est de croire que c’est possible.
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Dim 5 Oct 2014 - 16:52

    Merci o:



    Just want to be yours.
    Lenalee
    Lenalee
    FémininAge : 34Messages : 40

    Dim 5 Oct 2014 - 21:59

    merci
    Foxe
    Foxe
    FémininAge : 23Messages : 122

    Dim 19 Oct 2014 - 21:26

    Oh, merci beaucoup, c'est pratique !



    Faire Une Lettrine - Page 24 Wet_ha10
    Aishitteru
    Aishitteru
    FémininAge : 28Messages : 68

    Mer 29 Oct 2014 - 14:27

    Merci beaucoup ! ^^
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Jeu 30 Oct 2014 - 22:19

    La lettrine est très joli et je suis ravie de voir qu'on peut le réaliser. Merci pour ce magnifique partage.
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Mer 5 Nov 2014 - 16:15

    merci



    Faire Une Lettrine - Page 24 1424818313-sign-apoka
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:01