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 : -20%
Drone Dji DJI Mini 4K (EU)
Voir le deal
239 €

    Faire Une Lettrine

    Kazuya
    Kazuya
    MasculinAge : 32Messages : 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 9 CKMiDeikSo
    Rybenn
    Rybenn
    MasculinAge : 26Messages : 168

    Dim 11 Déc 2011 - 15:55

    Génial {à moi les beaux RPs !!}, merci bien :cat:.



    Faire Une Lettrine - Page 9 Tumblr_meq7ycm4Ia1ryfwiuo1_500
    Jabberwock Elyra
    Jabberwock Elyra
    MasculinAge : 30Messages : 44

    Dim 11 Déc 2011 - 17:24

    Ouiii je veux savoir miciii^^
    Faxaw
    Faxaw
    MasculinAge : 26Messages : 39

    Dim 11 Déc 2011 - 18:07

    Je vais pouvoir faire de splendide Rp's {:
    NowbodyxX
    NowbodyxX
    MasculinAge : 28Messages : 2

    Dim 18 Déc 2011 - 14:18

    Merci ! :)
    RAIN
    RAIN
    FémininAge : 29Messages : 41

    Dim 18 Déc 2011 - 14:27

    Je veux voiiir




    Quatres mots sur un piano.
    Faire Une Lettrine - Page 9 110119045725889575
    DDril
    DDril
    MasculinAge : 40Messages : 34

    Lun 19 Déc 2011 - 18:48

    Merci pour l'astuce :3
    M&m's
    M&m's
    FémininAge : 36Messages : 7

    Mar 20 Déc 2011 - 12:50

    Merci o/
    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Mer 21 Déc 2011 - 10:12

    Merci pour le tuto !
    Elyna
    Elyna
    FémininAge : 28Messages : 28

    Mer 21 Déc 2011 - 17:52

    Merci d'avance x3



    Faire Une Lettrine - Page 9 162729darkness
    Náriël
    Náriël
    FémininAge : 45Messages : 22

    Mar 27 Déc 2011 - 15:18

    Merci pour le tuto. Very Happy
    Sund4y
    Sund4y
    FémininAge : 32Messages : 15

    Ven 30 Déc 2011 - 15:03

    Merci :)
    Kira Sazaki
    Kira Sazaki
    FémininAge : 30Messages : 22

    Ven 30 Déc 2011 - 15:50

    Merci merci merci merci merci ! *-*
    Anonymous
    Invité

    Ven 30 Déc 2011 - 16:18

    Ouh ! Tout ce dont j'ai besoin ! Merci beaucoup ! Very Happy
    xTCHiSS
    xTCHiSS
    FémininAge : 27Messages : 4

    Sam 31 Déc 2011 - 18:26

    S'il te plait, enseigne nous ton savoir Ô maitre *-*
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Sam 31 Déc 2011 - 18:57

    Merci du partage ! Very Happy



    Faire Une Lettrine - Page 9 Comman27
    Liia
    Liia
    FémininAge : 29Messages : 91

    Lun 2 Jan 2012 - 11:16

    Merci pour le tuto :)
    Ge-gege08
    Ge-gege08
    FémininAge : 34Messages : 43

    Lun 2 Jan 2012 - 19:45

    Je pense savoir comment faire, mais pour être sûr!
    Merci d'avance :)
    Biche
    Biche
    FémininAge : 28Messages : 27

    Mar 3 Jan 2012 - 8:14

    Super tuto, ça rend vachement mieux dans les contextes :gentleman:
    Eden.
    Eden.
    FémininAge : 32Messages : 201

    Mar 3 Jan 2012 - 13:33

    Merci d'avance ^^
    Lou'
    Lou'
    FémininAge : 34Messages : 99

    Mar 3 Jan 2012 - 13:39

    Siouplaiiit? :)

    Merci d'avance pour le tuto Very Happy
    Bang!
    Bang!
    FémininAge : 34Messages : 32

    Mar 3 Jan 2012 - 14:03

    Merci pour le tuto !



    ham7
    Valar Morghulis
    Valar Morghulis
    MasculinAge : 29Messages : 872

    Mar 3 Jan 2012 - 17:59

    Super sympas merci Wink



    Faire Une Lettrine - Page 9 962239linknever
    Irissia87
    Irissia87
    FémininAge : 37Messages : 124

    Mer 4 Jan 2012 - 19:01

    Merci!!
    Solfia
    Solfia
    FémininAge : 27Messages : 15

    Jeu 5 Jan 2012 - 18:33

    merci ^^ :friends:



    Faire Une Lettrine - Page 9 151241SignaSolfiaDalia1
    CN.June
    CN.June
    FémininAge : 25Messages : 315

    Dim 8 Jan 2012 - 15:21

    Merci pour cette astuce :DD
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 11:05