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.


    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 28 CKMiDeikSo
    Viou
    Viou
    FémininAge : 35Messages : 181

    Mar 19 Juil 2016 - 20:26

    S'il te plait ? 8D
    wasa
    wasa
    MasculinAge : 31Messages : 6

    Jeu 28 Juil 2016 - 16:31

    Merci :)
    Froufy
    Froufy
    FémininAge : 23Messages : 59

    Mer 10 Aoû 2016 - 16:34

    Merciii je veux savoir :innocent:



    1+1= 4
          2
    3
    Sybline
    Sybline
    FémininAge : 37Messages : 27

    Mer 10 Aoû 2016 - 22:28

    Merci pour le partage ^^
    Mimi1405
    Mimi1405
    FémininAge : 40Messages : 20

    Sam 22 Oct 2016 - 13:27

    Merci beaucoup pour ce tutoriel Very Happy
    Lorea
    Lorea
    FémininAge : 29Messages : 9

    Dim 30 Oct 2016 - 17:55

    Merci d'avance !
    Leak
    Leak
    FémininAge : 26Messages : 21

    Mar 1 Nov 2016 - 17:20

    Merci! Very Happy
    Patou972
    Patou972
    FémininAge : 45Messages : 180

    Mar 22 Nov 2016 - 15:32

    merci beaucoup
    November
    November
    MasculinAge : 23Messages : 50

    Mer 21 Déc 2016 - 12:36

    Merci ^^
    Waza
    Waza
    FémininAge : 103Messages : 177

    Mar 3 Avr 2018 - 0:08

    Merci beaucoup ! Très utile !
    Caneton
    Caneton
    FémininAge : 29Messages : 3

    Mar 6 Aoû 2019 - 21:06

    Simple et efficace, un grand merci ! :chomp:
    Tekateki
    Tekateki
    MasculinAge : 21Messages : 29

    Lun 20 Nov 2023 - 20:50

    Merci !
    Anonymous
    Invité

    Lun 20 Nov 2023 - 22:22

    Merci ! :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 6 Mai 2024 - 15:21