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 :
Manga Fire Force : où commander le Tome 34 Fire ...
Voir le deal
11.50 €

    Faire Une Lettrine

    Kazuya
    Kazuya
    MasculinAge : 31Messages : 1499

    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



    Faire Une Lettrine CKMiDeikSo
    Siria
    Siria
    FémininAge : 33Messages : 5

    Mar 12 Avr 2011 - 16:06

    On dit, merci par avance ?^^
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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 ^^).



    sign
    Lys Draw
    Lys Draw
    FémininAge : 30Messages : 1993

    Mar 12 Avr 2011 - 16:50

    Sympa, j'avais du mal à trouver l'astuce, du moins en bien expliquée!
    Merci ^^
    Arawen
    Arawen
    FémininAge : 32Messages : 126

    Mar 12 Avr 2011 - 17:18

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

    Merci donc par avance aussi en passant. ^^



    Faire Une Lettrine 672035arawensaber
    Anthow'
    Anthow'
    MasculinAge : 30Messages : 225

    Mar 12 Avr 2011 - 21:33

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



    A N T H O W '
    Faire Une Lettrine Rihanu

    Pirate

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

    Mar 12 Avr 2011 - 23:26

    Merci d'avance Razz



    Faire Une Lettrine Fairytailparfaite
    Kazuya
    Kazuya
    MasculinAge : 31Messages : 1499

    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



    Faire Une Lettrine CKMiDeikSo
    Slash
    Slash
    MasculinAge : 30Messages : 80

    Mer 13 Avr 2011 - 13:10

    Merci pour l'astuce !



    Faire Une Lettrine Bird10
    Lys Draw
    Lys Draw
    FémininAge : 30Messages : 1993

    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!
    Kazuya
    Kazuya
    MasculinAge : 31Messages : 1499

    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?



    Faire Une Lettrine CKMiDeikSo
    Lys Draw
    Lys Draw
    FémininAge : 30Messages : 1993

    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)...
    Kazuya
    Kazuya
    MasculinAge : 31Messages : 1499

    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



    Faire Une Lettrine CKMiDeikSo
    Lys Draw
    Lys Draw
    FémininAge : 30Messages : 1993

    Jeu 14 Avr 2011 - 12:59

    Il n'existe pas d'équivalent html pour le float, c'est bien ça le problème...
    Soul
    Soul
    MasculinAge : 28Messages : 1723

    Jeu 14 Avr 2011 - 19:30

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

    Ven 15 Avr 2011 - 9:08

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

    Sam 16 Avr 2011 - 10:33

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






    OHANA
    Driver
    Driver
    MasculinAge : 30Messages : 62

    Sam 16 Avr 2011 - 19:50

    Merci bien !
    Xelha
    Xelha
    FémininAge : 31Messages : 140

    Sam 16 Avr 2011 - 23:23

    Je peux voir svp?
    Esyllt
    Esyllt
    MasculinAge : 32Messages : 37

    Lun 18 Avr 2011 - 14:43

    Merci ! J'essaie cela de suite ..
    Doc
    Doc
    MasculinAge : 37Messages : 649

    Lun 18 Avr 2011 - 19:42

    Merci pour l'astuce ^^



    Faire Une Lettrine Signat11
    avatar
    KanyeWest
    MasculinAge : 32Messages : 137

    Lun 18 Avr 2011 - 21:46

    Merci à toi.
    Shiryuu
    Shiryuu
    MasculinAge : 27Messages : 105

    Mar 19 Avr 2011 - 5:05

    Ho génial merci Very Happy !!





    [img][/img]

    GLADIATOR
    GLADIATOR
    MasculinAge : 29Messages : 29

    Ven 22 Avr 2011 - 11:27

    merci
    Doll'Art
    Doll'Art
    FémininAge : 28Messages : 36

    Lun 25 Avr 2011 - 0:24

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 27 Fév 2024 - 18:39