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.

-45%
Le deal à ne pas rater :
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre 14 couverts – ...
339 € 622 €
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 21 CKMiDeikSo
    Castielle
    Castielle
    FémininAge : 28Messages : 33

    Ven 17 Mai 2013 - 21:45

    Merci *-*
    Zooé
    Zooé
    FémininAge : 26Messages : 66

    Sam 18 Mai 2013 - 14:48

    Merci!
    Alexya
    Alexya
    FémininAge : 32Messages : 9

    Dim 19 Mai 2013 - 15:28

    merci :)
    Féli
    Féli
    FémininAge : 41Messages : 117

    Dim 19 Mai 2013 - 15:47

    sympa, merci



    Faire Une Lettrine - Page 21 MtGPjQFSeHqzl1zoiU-5zwGCNig
    LightGlace
    LightGlace
    FémininAge : 31Messages : 43

    Ven 24 Mai 2013 - 13:41

    merci pour cette astuce !
    Guift
    Guift
    FémininAge : 25Messages : 50

    Sam 25 Mai 2013 - 23:20

    Merci ça doit être beau pour le début d'un long texte ! =)



    Faire Une Lettrine - Page 21 Signa210
    Alaplaya1
    Alaplaya1
    FémininAge : 32Messages : 18

    Lun 27 Mai 2013 - 0:49

    Merci pour ce tuto !
    lapinette
    lapinette
    FémininAge : 35Messages : 28

    Lun 27 Mai 2013 - 20:56

    ph j'ai vraiment hate de voir ce que ceci donne et merciiiiiiiii
    MaeDakota
    MaeDakota
    FémininAge : 33Messages : 46

    Mer 29 Mai 2013 - 9:54

    Merci
    Himmie
    Himmie
    MasculinAge : 27Messages : 128

    Jeu 6 Juin 2013 - 19:37

    Merci pour ton tuto
    FLOetGRI
    FLOetGRI
    FémininAge : 23Messages : 34

    Ven 7 Juin 2013 - 17:22

    Merci ! :)
    Kiki*
    Kiki*
    FémininAge : 27Messages : 32

    Sam 15 Juin 2013 - 15:24

    Merci :)
    avatar
    Hinate-Chan
    FémininAge : 29Messages : 44

    Sam 15 Juin 2013 - 18:25

    Merci pour ce tuto' !
    Mylirou
    Mylirou
    FémininAge : 27Messages : 7

    Dim 16 Juin 2013 - 11:32

    merci pour le tuto
    Eyko@
    Eyko@
    FémininAge : 24Messages : 30

    Dim 16 Juin 2013 - 15:10

    Merciiiiiiiiiiiii ^w^
    titan1
    titan1
    MasculinAge : 29Messages : 220

    Mar 25 Juin 2013 - 22:48

    Merci.



    Seule la mort met fin au devoir
    Kiwi SuperStar
    Kiwi SuperStar
    FémininAge : 32Messages : 88

    Mer 26 Juin 2013 - 15:23

    Sympa Very Happy
    Je trouve cet effet pas mal dans un texte de rédaction ^.^

    Mercii Very Happy
    Macaron
    Macaron
    FémininAge : 25Messages : 37

    Lun 1 Juil 2013 - 18:59

    Mercii ! :)
    Sayurii
    Sayurii
    FémininAge : 32Messages : 11

    Lun 1 Juil 2013 - 20:28

    S'il te plaiiiiit :) Et merci d'avance !
    Katil
    Katil
    FémininAge : 26Messages : 35

    Mer 10 Juil 2013 - 17:31

    Merci, c'est très pratique
    Elegna
    Elegna
    FémininAge : 28Messages : 17

    Mer 10 Juil 2013 - 19:04

    Super tuto, merci Very Happy
    Jenska
    Jenska
    FémininAge : 29Messages : 22

    Lun 22 Juil 2013 - 21:54

    Merci
    Toupimero
    Toupimero
    FémininAge : 63Messages : 56

    Sam 27 Juil 2013 - 9:07

    Merci
    poloch
    poloch
    MasculinAge : 30Messages : 109

    Lun 29 Juil 2013 - 9:43

    Merci (:



    Faire Une Lettrine - Page 21 Sans_t12
    Aya-crochet
    Aya-crochet
    FémininAge : 29Messages : 13

    Jeu 8 Aoû 2013 - 12:59

    merci :)
    enfant euh abracadabra :captain: 
    Contenu sponsorisé


      La date/heure actuelle est Dim 12 Mai 2024 - 0:02