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 : 24Messages : 1497

    le 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



    fascicularia
    MasculinAge : 49Messages : 181

    le Jeu 30 Juin 2011 - 19:18

    Merci pour ce partage.
    avatar
    Bellabimbo444
    FémininAge : 19Messages : 61

    le Ven 1 Juil 2011 - 15:02

    Merci ;D



    avatar
    Wrung Jah
    MasculinAge : 23Messages : 59

    le Ven 1 Juil 2011 - 16:30

    Merci pour le tuto :)
    avatar
    Honey
    FémininAge : 26Messages : 57

    le Mar 5 Juil 2011 - 15:04

    Merci pour cette petite astuce utile :)
    avatar
    regor
    MasculinAge : 64Messages : 3

    le Mer 6 Juil 2011 - 15:14

    Je veux essayer
    merci
    avatar
    Maya Kristoff
    FémininAge : 27Messages : 15

    le Mer 6 Juil 2011 - 21:33

    Le mot magique c'est...Merci !
    avatar
    EcKo'
    MasculinAge : 20Messages : 691

    le Mer 6 Juil 2011 - 21:36

    Sale vous plait ! xD



    avatar
    Taloula220
    FémininAge : 22Messages : 22

    le Ven 8 Juil 2011 - 13:30

    Je peux voir s'il te plaît ?
    avatar
    SoulNémésis
    FémininAge : 32Messages : 8

    le Lun 11 Juil 2011 - 12:48

    Merci pour le tuto :)
    avatar
    adrenaline.
    FémininAge : 21Messages : 13

    le Mar 12 Juil 2011 - 22:26

    Merci pour le tuto !
    avatar
    Silver Fangs
    MasculinAge : 24Messages : 307

    le Mer 13 Juil 2011 - 2:17

    Magique






    ► Pilote de l'Atlantis ◄
    Carmen
    FémininAge : 44Messages : 19

    le Mer 13 Juil 2011 - 10:22

    merci par avance donc
    formidable je cherchais ça depuis longtemps ^^



    Ne se déconnecte pas .. mais suis pas toujours la, ni même devant mon pc, parfois même pas chez moi ... bref.. me cherchez pas je suis pas la ^^
    avatar
    Sachi
    FémininAge : 23Messages : 50

    le Mer 13 Juil 2011 - 16:00

    merci pour le tuto', ça aide vachement ♥
    avatar
    Laminois Kira
    MasculinAge : 25Messages : 64

    le Mer 13 Juil 2011 - 19:19

    Merci d'avance =)






    avatar
    Krolinger
    MasculinAge : 27Messages : 67

    le Jeu 14 Juil 2011 - 0:14

    Merci beaucoup



    avatar
    Shishi
    FémininAge : 36Messages : 9

    le Ven 15 Juil 2011 - 14:28

    Intéressant! Merci beaucoup
    avatar
    Harchant
    FémininAge : 22Messages : 10

    le Sam 16 Juil 2011 - 19:20

    I wanna see :) Merci pour ce tuto !
    avatar
    Marion-san
    FémininAge : 20Messages : 89

    le Sam 16 Juil 2011 - 19:27

    Kazuya Merci Beaucoup j'ai chercher pendant une semaine pas trouver et grace a toi J'ai enfin trouver Un Grand Merci A toi !



    avatar
    Nell
    FémininAge : 23Messages : 22

    le Dim 17 Juil 2011 - 19:39

    On m'avait toujours dit que le mot magique c'était "s'il te plait"... Mais bon, dans le doute, je vais aussi dire "merci" ! x)
    avatar
    Ui
    FémininAge : 23Messages : 16

    le Mar 19 Juil 2011 - 2:09

    Oh merci pour ce tutoriel. Ça fait un petit moment que je galère pour en faire une. Thanks. ♥
    avatar
    chacha-et-bleach
    FémininAge : 22Messages : 11

    le Mer 20 Juil 2011 - 14:40

    Bonne idée, merci !
    avatar
    Lizzie.
    FémininAge : 21Messages : 6

    le Mer 20 Juil 2011 - 17:55

    Merci beaucoup, +1 (:
    avatar
    Lauriale
    FémininAge : 20Messages : 113

    le Ven 22 Juil 2011 - 13:34

    Merci beaucoup, une lettrine peut toujours servir ! ^^
    avatar
    Chou ♥
    FémininAge : 20Messages : 19

    le Ven 22 Juil 2011 - 23:43

    Merci
    avatar
    Traum Ble
    FémininAge : 25Messages : 10

    le Sam 23 Juil 2011 - 6:04

    Merci Beaucoup!! =)



    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Sep 2017 - 5:59