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 :
Display Star Wars Unlimited Ombres de la Galaxie : où l’acheter ?
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 11 CKMiDeikSo
    Anonymous
    Invité

    Dim 5 Fév 2012 - 23:46

    Merci Very Happy
    Laps~solutE
    Laps~solutE
    FémininAge : 40Messages : 74

    Mar 7 Fév 2012 - 10:54

    Merci par avance :love:



    Faire Une Lettrine - Page 11 Ban_sl10
    Par notre bon Captain, merci *-* .
    Faire Une Lettrine - Page 11 0712270256061917640
    jey38830
    jey38830
    MasculinAge : 30Messages : 60

    Sam 11 Fév 2012 - 20:05

    Merci Very Happy
    Kurik
    Kurik
    MasculinAge : 31Messages : 32

    Dim 12 Fév 2012 - 11:42

    Pas mal du tout, ça ! Cela me semble bien sympathique. Merci beaucoup !!
    Grenouille
    Grenouille
    FémininAge : 28Messages : 49

    Dim 12 Fév 2012 - 13:59

    J'aimerais bien savoir moi =3 Merci
    ma911
    ma911
    FémininAge : 40Messages : 22

    Mar 14 Fév 2012 - 10:51

    woua merci
    Rutile
    Rutile
    FémininAge : 28Messages : 17

    Sam 18 Fév 2012 - 17:36

    Moi aussi please! 8D
    Yuuna
    Yuuna
    FémininAge : 28Messages : 19

    Sam 18 Fév 2012 - 20:22

    Merci !
    fafa
    fafa
    MasculinAge : 34Messages : 34

    Dim 19 Fév 2012 - 16:32

    merci
    Shyn
    Shyn
    FémininAge : 25Messages : 39

    Dim 19 Fév 2012 - 16:58

    J'ai toujours rêvé de pouvoir faire une lettre comme ça. :)
    Merci beaucoup !
    Reiõ
    Reiõ
    MasculinAge : 30Messages : 206

    Dim 19 Fév 2012 - 23:34

    Merci Wink
    Davy
    Davy
    MasculinAge : 27Messages : 25

    Lun 20 Fév 2012 - 18:36

    Merci^^

    Rindo
    Rindo
    MasculinAge : 37Messages : 6

    Mar 21 Fév 2012 - 18:16

    Merci pour le partage :) Petite chose mais, ça change un texte ^^
    Dyesel
    Dyesel
    MasculinAge : 34Messages : 14

    Mer 22 Fév 2012 - 20:10

    Merci, ça me sera utile ! =)
    Vintage Phonic
    Vintage Phonic
    FémininAge : 34Messages : 21

    Mer 29 Fév 2012 - 16:07

    Ca m'intéreeesse *.* ça a l'air trop bien
    Dlanor
    Dlanor
    FémininAge : 29Messages : 9

    Jeu 1 Mar 2012 - 9:44

    Merci 8D
    x-carrie-x
    x-carrie-x
    FémininAge : 33Messages : 26

    Jeu 1 Mar 2012 - 10:54

    Merciiii à toi, c'est un effet très joli !



    Faire Une Lettrine - Page 11 201155sign
    shala
    shala
    FémininAge : 32Messages : 213

    Jeu 1 Mar 2012 - 13:08

    merci



    Haaken
    Haaken
    FémininAge : 30Messages : 43

    Ven 2 Mar 2012 - 5:43

    Merci pour le tuto ! Very Happy
    Anonymous
    Invité

    Sam 3 Mar 2012 - 19:04

    Merci !
    Little_Sister
    Little_Sister
    FémininAge : 30Messages : 19

    Lun 5 Mar 2012 - 11:35

    Merci pour cette astuce ^^
    Aekny
    Aekny
    FémininAge : 28Messages : 13

    Lun 5 Mar 2012 - 15:30

    Joli rendu, merci. :)



    Faire Une Lettrine - Page 11 Signa2c
    Cupcake!
    Cupcake!
    FémininAge : 28Messages : 46

    Mar 6 Mar 2012 - 19:13

    Merci de l'astuce :3
    Dobby
    Dobby
    MasculinAge : 35Messages : 11

    Mar 6 Mar 2012 - 19:18

    Meeeeerci :)
    warning.sign
    warning.sign
    FémininAge : 33Messages : 58

    Mer 7 Mar 2012 - 14:05

    Merci x)
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Mai 2024 - 19:21