AccueilFAQRechercherMembresGroupesS'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

    Partagez
    avatar
    Kazuya
    MasculinAge : 25Messages : 1497

    le Mar 12 Avr 2011 - 2:06




    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



    avatar
    Siria
    FémininAge : 27Messages : 5

    le Mar 12 Avr 2011 - 16:06

    On dit, merci par avance ?^^
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 12 Avr 2011 - 16:14

    Merci pour cette astuce, cet effet est d'ailleurs très joli et présente bien un texte de contexte pour un forum je trouve^^

    Je l'ai ajoutée sur le site (en lien vers ton message ^^).



    avatar
    Lys Draw
    FémininAge : 23Messages : 1992

    le Mar 12 Avr 2011 - 16:50

    Sympa, j'avais du mal à trouver l'astuce, du moins en bien expliquée!
    Merci ^^




    Merci Narja pour cette belle sign'! :)
    avatar
    Arawen
    FémininAge : 26Messages : 126

    le Mar 12 Avr 2011 - 17:18

    Heu... S'il te plait ! ^^

    Merci donc par avance aussi en passant. ^^



    avatar
    Anthow'
    MasculinAge : 24Messages : 225

    le Mar 12 Avr 2011 - 21:33

    Cool! Ca peut vraiment être utile! Merci a toi



    A N T H O W '


    Pirate

    La patience est une vertu
    qui s'acquiert avec de la patience.
    avatar
    Ryusuke
    MasculinAge : 24Messages : 83

    le Mar 12 Avr 2011 - 23:26

    Merci d'avance Razz



    avatar
    Kazuya
    MasculinAge : 25Messages : 1497

    le Mer 13 Avr 2011 - 5:57

    Hé bien hé bien, qu'il sont poli ces N'utopiens (Encore une rime, ça deviens une habitude x) )
    Mais de rien tout le monde, au plaisir de vous rendre service Wink



    avatar
    Slash
    MasculinAge : 23Messages : 80

    le Mer 13 Avr 2011 - 13:10

    Merci pour l'astuce !



    avatar
    Lys Draw
    FémininAge : 23Messages : 1992

    le Mer 13 Avr 2011 - 14:29

    En fait ce n'était pas ce que je recherchais, j'avais déjà trouvé le principe... (Mais j'ai pas tilté que le sujet était dans la section codage'actif aussi ><)

    Mon problème se posait là-dessus:
    Comment peut-on (ou du moins peut-on?) utiliser une lettrine dans un message quelconque (exemple: introduction pour une galerie graphique ici, puisqu'initialement, la balise pour le texte que tu donnes n'est pas définie pour le forum)? Donc sans recours au panneau d'administration? Peut-on faire référence aux balises <.style.> pour lier le css au html ou inclure l'un dans l'autre?

    Voilà, merci d'avance!




    Merci Narja pour cette belle sign'! :)
    avatar
    Kazuya
    MasculinAge : 25Messages : 1497

    le Mer 13 Avr 2011 - 20:15

    Si j'ai bien compris tu voudrais que la lettrine soit définie par défaut sur tout les messages postés sur le forum?
    Ou alors que la lettrine soir utiliser dans une contexte hors d'un forum, sur un support qui admet le HTML mais ou le CSS n'est pas modifiable?



    avatar
    Lys Draw
    FémininAge : 23Messages : 1992

    le Mer 13 Avr 2011 - 21:25

    Ce serait ta dernière hypothèse, je sais déjà comment faire pour appliquer une balise sur tout un forum en utilisant le css du PA, donc là je cherche bien comment en faire une indépendamment des caractéristiques css du forum/site où je peux me trouver, si c'est possible ^^ (En essayant d'inclure le css dans le html avec les <.style.>, je rencontre à mon avis le problème avec le first-letter)...




    Merci Narja pour cette belle sign'! :)
    avatar
    Kazuya
    MasculinAge : 25Messages : 1497

    le Jeu 14 Avr 2011 - 0:25

    Ah d'accord, mais si tu créais une class que tu n'appliquais que à la première lettre? tongue
    Avec un changement de la grosseur et un float left par exemple Rolling Eyes



    avatar
    Lys Draw
    FémininAge : 23Messages : 1992

    le Jeu 14 Avr 2011 - 12:59

    Il n'existe pas d'équivalent html pour le float, c'est bien ça le problème...




    Merci Narja pour cette belle sign'! :)
    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Jeu 14 Avr 2011 - 19:30

    Merci pour ton tuto Very Happy
    avatar
    miily-doud
    FémininAge : 25Messages : 34

    le Ven 15 Avr 2011 - 9:08

    Je peux voir ( et on dit s'il-te-plaît) =)
    avatar
    Bang
    MasculinAge : 22Messages : 2434

    le Sam 16 Avr 2011 - 10:33

    Merci d'avance pour le tuto, j'ai hâte de voir ça :)






    OHANA
    avatar
    Driver
    MasculinAge : 24Messages : 62

    le Sam 16 Avr 2011 - 19:50

    Merci bien !
    avatar
    Xelha
    FémininAge : 24Messages : 107

    le Sam 16 Avr 2011 - 23:23

    Je peux voir svp?




    ¤Kit by me¤
    avatar
    Esyllt
    MasculinAge : 25Messages : 37

    le Lun 18 Avr 2011 - 14:43

    Merci ! J'essaie cela de suite ..
    avatar
    Doc
    MasculinAge : 31Messages : 609

    le Lun 18 Avr 2011 - 19:42

    Merci pour l'astuce ^^



    KanyeWest
    MasculinAge : 26Messages : 137

    le Lun 18 Avr 2011 - 21:46

    Merci à toi.
    avatar
    Shiryuu
    MasculinAge : 21Messages : 105

    le Mar 19 Avr 2011 - 5:05

    Ho génial merci Very Happy !!





    [img][/img]

    avatar
    GLADIATOR
    MasculinAge : 23Messages : 29

    le Ven 22 Avr 2011 - 11:27

    merci
    avatar
    Doll'Art
    FémininAge : 22Messages : 36

    le Lun 25 Avr 2011 - 0:24

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 24 Oct 2017 - 11:41