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 : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    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 22 CKMiDeikSo
    thoL
    thoL
    MasculinAge : 26Messages : 40

    Ven 9 Aoû 2013 - 21:57

    Merci.
    Shanilae
    Shanilae
    FémininAge : 31Messages : 78

    Jeu 15 Aoû 2013 - 16:24

    Merci ! =)
    Cola
    Cola
    FémininAge : 25Messages : 81

    Ven 16 Aoû 2013 - 19:39

    Merci (:



    Faire Une Lettrine - Page 22 Signa_11
    Necro Seth
    Necro Seth
    MasculinAge : 36Messages : 30

    Sam 24 Aoû 2013 - 22:36

    Merci pour ce tuto :)
    Fleurine
    Fleurine
    FémininAge : 25Messages : 75

    Mar 27 Aoû 2013 - 14:10

    Zoui!! Ze veux le savoir XD !!
    Quelle bonne idée!
    Eira
    Eira
    FémininAge : 31Messages : 22

    Mar 27 Aoû 2013 - 17:55

    Trop cool ! Merci **



    Faire Une Lettrine - Page 22 512998tumblrmd3783d9se1
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Mar 27 Aoû 2013 - 18:32

    Merciiii =D



    Faire Une Lettrine - Page 22 878302signaturevegeta
    Deadpoolio
    Deadpoolio
    MasculinAge : 34Messages : 277

    Mer 28 Aoû 2013 - 11:57

    Vraiment très cool ça, j'ai toujours voulu apprendre à le faire depuis que j'ai vu l'effet. Au pire, si le RP est nul, y a toujours une lettrine pour embellir la présentation :p
    Merci :)
    Kathee
    Kathee
    FémininAge : 31Messages : 680

    Ven 6 Sep 2013 - 10:52

    Yop ! Merci le Tuto !
    On y pense rarement, mais les Lettrines ça fait tout de suite plus classe cheers





    Forum dérivé ouat
    dans un univers steampunk :heart:
    xToshi-Shûx
    xToshi-Shûx
    Autre / Ne pas divulguerAge : 33Messages : 39

    Jeu 19 Sep 2013 - 23:37

    Merci du partage ^^



    allcl
    allcl
    FémininAge : 25Messages : 81

    Dim 22 Sep 2013 - 18:12

    Merci!
    Feng.Yi
    Feng.Yi
    FémininAge : 109Messages : 30

    Lun 7 Oct 2013 - 14:12

    Merci!
    Aryfrancois
    Aryfrancois
    MasculinAge : 25Messages : 4

    Jeu 17 Oct 2013 - 18:55

    Merci d'avance pour l'astuce ! :)
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Sam 19 Oct 2013 - 13:51

    Merci merci, ça me servira vachement !



    Faire Une Lettrine - Page 22 Kit_si10
    Fallen Besh'
    Fallen Besh'
    MasculinAge : 30Messages : 4

    Lun 21 Oct 2013 - 22:48

    Merci pour ton le tuto Very Happy
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mer 23 Oct 2013 - 1:56

    merci !



    Faire Une Lettrine - Page 22 Ye49
    Toshiki
    Toshiki
    FémininAge : 28Messages : 56

    Jeu 24 Oct 2013 - 17:20

    Thanx
    Nessaleth
    Nessaleth
    FémininAge : 33Messages : 52

    Dim 27 Oct 2013 - 21:05

    Merci ! Very Happy 
    Evydence
    Evydence
    FémininAge : 28Messages : 60

    Ven 1 Nov 2013 - 1:18

    Merkii
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 34Messages : 144

    Ven 8 Nov 2013 - 17:25

    merciiiiiii ^^



    Faire Une Lettrine - Page 22 Signa10
    RainOrigami
    RainOrigami
    FémininAge : 24Messages : 22

    Ven 8 Nov 2013 - 19:29

    Merci ! :)
    Swethlana.
    Swethlana.
    FémininAge : 25Messages : 24

    Dim 10 Nov 2013 - 11:53

    Merci buaucoup :3
    Peps
    Peps
    FémininAge : 32Messages : 11

    Lun 11 Nov 2013 - 10:49

    Merci Very Happy Je vais tester ^^
    Amiko
    Amiko
    FémininAge : 33Messages : 51

    Lun 18 Nov 2013 - 21:01

    Le mot magique ? Merci !
    Schnappi
    Schnappi
    FémininAge : 33Messages : 113

    Mar 19 Nov 2013 - 22:20

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 19:15