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.

-29%
Le deal à ne pas rater :
DYSON V8 Origin – Aspirateur balai sans fil
269.99 € 379.99 €
Voir le deal

    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 7 CKMiDeikSo
    Keiji Okane
    Keiji Okane
    MasculinAge : 31Messages : 11

    Mer 28 Sep 2011 - 19:01

    Merci ^^
    Felineko
    Felineko
    FémininAge : 31Messages : 6

    Jeu 29 Sep 2011 - 11:16

    Mici Beaucoup o/ !
    chess
    chess
    FémininAge : 39Messages : 37

    Jeu 29 Sep 2011 - 23:30

    merci momannnnn XD
    DoDo94
    DoDo94
    MasculinAge : 31Messages : 104

    Sam 1 Oct 2011 - 13:51

    Merci d'avance =)



    [center]Faire Une Lettrine - Page 7 Signthebreaker
    <~::Kit by Moi::~>
    Pepsi.cola
    Pepsi.cola
    FémininAge : 31Messages : 9

    Dim 16 Oct 2011 - 1:02

    merci :hug:
    Inconnue
    Inconnue
    MasculinAge : 40Messages : 29

    Dim 16 Oct 2011 - 1:47

    Merci ! cheers



    Faire Une Lettrine - Page 7 V_for_vendetta_banner_by_cre5po-d2z0c54
    lipa
    lipa
    FémininAge : 33Messages : 51

    Lun 17 Oct 2011 - 21:19

    Merci !
    Gryps
    Gryps
    FémininAge : 33Messages : 12

    Mar 18 Oct 2011 - 20:29

    Merci d'avance. ~
    Shy
    Shy
    MasculinAge : 30Messages : 126

    Mar 25 Oct 2011 - 4:08

    Merci



    Faire Une Lettrine - Page 7 1413067250-signature37-1
    Immortal
    Immortal
    FémininAge : 38Messages : 637

    Mar 25 Oct 2011 - 14:03

    Hannnn merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii :p




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    alcantara
    alcantara
    FémininAge : 26Messages : 121

    Mar 25 Oct 2011 - 21:25

    Merci (;
    GaaraXGaara
    GaaraXGaara
    MasculinAge : 34Messages : 49

    Mar 25 Oct 2011 - 22:19

    C'est du codage? :O



    Je préfère avoir la maladie de parkinson que la maladie Alzheimer, pourquoi?
    Parce que je préfère renverser une goutte de mon verre que d'oublié de le boire.


    :nawak:
    Wos
    Wos
    MasculinAge : 29Messages : 59

    Mer 26 Oct 2011 - 11:32

    Merci !



    Faire Une Lettrine - Page 7 Huh__by_jessicacasciotta-d3jz3f9
    Sina
    Sina
    FémininAge : 30Messages : 33

    Mer 26 Oct 2011 - 18:58

    Merci ^^



    Faire Une Lettrine - Page 7 SinaSignatureNU
    Bunny Lune
    Bunny Lune
    FémininAge : 35Messages : 145

    Dim 30 Oct 2011 - 15:41

    Merci beaucoup pour l'astuce.
    Yasse888
    Yasse888
    MasculinAge : 27Messages : 94

    Dim 30 Oct 2011 - 23:55

    Je veux voir l'astuce ^^



    Faire Une Lettrine - Page 7 16735320530577_sans_titre1
    Narialys
    Narialys
    FémininAge : 28Messages : 29

    Lun 31 Oct 2011 - 16:28

    Merci ! ^^



    Faire Une Lettrine - Page 7 B79556058132607996b3de7317d36
    CrazyGirl33
    CrazyGirl33
    FémininAge : 25Messages : 12

    Lun 31 Oct 2011 - 20:52

    Merci !
    Plopounet
    Plopounet
    MasculinAge : 29Messages : 56

    Mar 1 Nov 2011 - 20:12

    Merci d'avance !
    The Beginner
    The Beginner
    MasculinAge : 27Messages : 34

    Mar 1 Nov 2011 - 20:16

    Les lettrines ça nous fascine ~
    Merci =3
    Kahlan
    Kahlan
    FémininAge : 38Messages : 371

    Mer 2 Nov 2011 - 16:24

    Je ne connaissais pas le terme mais je suis ravie de savoir désormais ce que c'est & de savoir le faire grâce à toi. Merci !!!
    Seo.
    Seo.
    MasculinAge : 30Messages : 290

    Jeu 3 Nov 2011 - 14:24

    Je veux voir :)
    Minimoy28
    Minimoy28
    MasculinAge : 31Messages : 59

    Jeu 3 Nov 2011 - 15:26

    Merci beaucoup pour ce code Wink
    Nero Brigh
    Nero Brigh
    MasculinAge : 40Messages : 85

    Ven 11 Nov 2011 - 2:04

    merci ^^
    Anonymous
    Invité

    Ven 11 Nov 2011 - 18:03

      Merci de partager ton savoir =3
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 5:07