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 :
Disque dur SSD CRUCIAL P3 1 To (3D NAND NVMe PCIe M.2)
Voir le deal
65.91 €

    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 4 CKMiDeikSo
    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Jeu 30 Juin 2011 - 19:18

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

    Ven 1 Juil 2011 - 15:02

    Merci ;D



    Wrung Jah
    Wrung Jah
    MasculinAge : 30Messages : 59

    Ven 1 Juil 2011 - 16:30

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

    Mar 5 Juil 2011 - 15:04

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

    Mer 6 Juil 2011 - 15:14

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

    Mer 6 Juil 2011 - 21:33

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

    Mer 6 Juil 2011 - 21:36

    Sale vous plait ! xD



    Faire Une Lettrine - Page 4 Afer
    Taloula220
    Taloula220
    FémininAge : 28Messages : 22

    Ven 8 Juil 2011 - 13:30

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

    Lun 11 Juil 2011 - 12:48

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

    Mar 12 Juil 2011 - 22:26

    Merci pour le tuto !
    Anonymous
    Invité

    Mer 13 Juil 2011 - 2:17

    Magique
    avatar
    Carmen
    FémininAge : 50Messages : 19

    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 ^^
    Sachi
    Sachi
    FémininAge : 30Messages : 50

    Mer 13 Juil 2011 - 16:00

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

    Mer 13 Juil 2011 - 19:19

    Merci d'avance =)



    Faire Une Lettrine - Page 4 1302251056523759110905572


    Anonymous
    Invité

    Jeu 14 Juil 2011 - 0:14

    Merci beaucoup
    Shishi
    Shishi
    FémininAge : 43Messages : 15

    Ven 15 Juil 2011 - 14:28

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

    Sam 16 Juil 2011 - 19:20

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

    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 !



    Faire Une Lettrine - Page 4 Tumblr_m6drlqJB9O1qbd8iro1_500
    Nell
    Nell
    FémininAge : 30Messages : 22

    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)
    Ui
    Ui
    FémininAge : 29Messages : 16

    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. ♥
    chacha-et-bleach
    chacha-et-bleach
    FémininAge : 28Messages : 11

    Mer 20 Juil 2011 - 14:40

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

    Mer 20 Juil 2011 - 17:55

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

    Ven 22 Juil 2011 - 13:34

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

    Ven 22 Juil 2011 - 23:43

    Merci
    Traum Ble
    Traum Ble
    FémininAge : 31Messages : 10

    Sam 23 Juil 2011 - 6:04

    Merci Beaucoup!! =)



    Faire Une Lettrine - Page 4 Resistme
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2024 - 12:53