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 : -29%
PC portable – MEDION 15,6″ FHD Intel i7 ...
Voir le deal
499.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 23 CKMiDeikSo
    Hamnesik
    Hamnesik
    FémininAge : 25Messages : 12

    Mar 10 Déc 2013 - 18:13

    Merci, je cherchais ça depuis longtemps *^*
    Patapey
    Patapey
    FémininAge : 104Messages : 14

    Mer 11 Déc 2013 - 14:37

    Mercii
    L.P
    L.P
    FémininAge : 25Messages : 36

    Sam 14 Déc 2013 - 14:51

    merciiiii
    Naïshy
    Naïshy
    FémininAge : 22Messages : 65

    Sam 14 Déc 2013 - 18:24

    S'il te plait ? MERCI *o*
    Bowtie
    Bowtie
    FémininAge : 34Messages : 62

    Mer 18 Déc 2013 - 19:57

    MERCI =D
    Nalex
    Nalex
    FémininAge : 34Messages : 154

    Sam 21 Déc 2013 - 14:26

    Curieuse :p



    Faire Une Lettrine - Page 23 567962k6yx
    Eykillyn
    Eykillyn
    FémininAge : 26Messages : 19

    Jeu 2 Jan 2014 - 21:55

    Ca peut être vachement utile je pense, merciiiieuh :'3
    Nothrion
    Nothrion
    FémininAge : 30Messages : 49

    Mar 14 Jan 2014 - 18:29

    Merci !
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Lun 20 Jan 2014 - 23:31

    Oui je veux savoir ^^
    Merci Very Happy
    Kruzoé
    Kruzoé
    FémininAge : 29Messages : 30

    Mar 21 Jan 2014 - 21:50

    Merci :)
    -Mishirame-
    -Mishirame-
    FémininAge : 30Messages : 26

    Jeu 30 Jan 2014 - 19:17

    merciii
    Enidech
    Enidech
    MasculinAge : 33Messages : 39

    Mer 5 Fév 2014 - 0:22

    Pas mal, ça donne un effet de style sympa!
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Mer 5 Fév 2014 - 14:04

      J'veux bien voir ce que ça donne exactement. '-'
      Merci d'avance !
    Jamy
    Jamy
    FémininAge : 31Messages : 41

    Mer 5 Fév 2014 - 15:30

    merci ! :)
    Pandawan
    Pandawan
    FémininAge : 25Messages : 30

    Jeu 27 Fév 2014 - 17:08

    Merci ~
    Rowana
    Rowana
    FémininAge : 22Messages : 22

    Dim 2 Mar 2014 - 4:03

    Merciii!
    FALLING
    FALLING
    FémininAge : 35Messages : 281

    Dim 2 Mar 2014 - 18:33

    merci beaucoup pour ce tuto ^^ par contre c'est juste moi ou le screenshot ne s'affiche pas ?
    Drakylla
    Drakylla
    MasculinAge : 32Messages : 32

    Lun 3 Mar 2014 - 17:08

    Ooooh merci ! C'est parfait pour écrire un contexte ! ^^
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Sam 29 Mar 2014 - 19:22

    Meurchi. *_*
    AMIANTE
    AMIANTE
    FémininAge : 28Messages : 36

    Sam 5 Avr 2014 - 8:23

    merci à toi



    uc
    LyN[ss]
    LyN[ss]
    FémininAge : 32Messages : 105

    Sam 5 Avr 2014 - 23:12

    Merci beaucoup
    Aya Hanazawa
    Aya Hanazawa
    FémininAge : 33Messages : 72

    Mar 8 Avr 2014 - 0:27

    jolie
    Edana
    Edana
    FémininAge : 33Messages : 173

    Lun 14 Avr 2014 - 9:57

    merci! =D
    Sixties
    Sixties
    FémininAge : 28Messages : 119

    Sam 31 Mai 2014 - 20:38

    Merci =)
    Ukrysis
    Ukrysis
    FémininAge : 27Messages : 64

    Dim 8 Juin 2014 - 12:37

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 13:02