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 : -28%
Brandt LVE127J – Lave-vaisselle encastrable 12 ...
Voir le deal
279.99 €

    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 14 CKMiDeikSo
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    Mar 5 Juin 2012 - 20:56

    Merci Very Happy
    Motoko
    Motoko
    FémininAge : 25Messages : 39

    Dim 10 Juin 2012 - 17:45

    merci :)
    Jeanne
    Jeanne
    FémininAge : 26Messages : 95

    Dim 10 Juin 2012 - 23:32

    C'est vraiment génial, j'avais jamais pensé à ça ♥
    Merci à toi du partage Very Happy



    Faire Une Lettrine - Page 14 Chloe-Moretz-Dark-Shadows-gif-by-jimmy-fungus
    Skyzberg
    Skyzberg
    MasculinAge : 27Messages : 45

    Mer 13 Juin 2012 - 15:22

    Le mot magique ? Merci Cool




    Faire Une Lettrine - Page 14 9j3yw5l95t9n3yxj

    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Ven 15 Juin 2012 - 4:25

    Merci Beaucoup =)
    Sunnie
    Sunnie
    FémininAge : 26Messages : 13

    Ven 15 Juin 2012 - 18:41

    Cet effet de Lettrine est superbe, je prends bien évidemment. Merci beaucoup du partage ! ♥
    Kalash
    Kalash
    MasculinAge : 33Messages : 5

    Sam 16 Juin 2012 - 21:04

    Merci, il a l'air très sympa cet effet hé hé.



    "C’est drôle comme les gens qui se croient instruits éprouvent le besoin de faire chier le monde."
    Faire Une Lettrine - Page 14 Killsigna
    Ambra Alesi
    Ambra Alesi
    FémininAge : 28Messages : 2

    Sam 16 Juin 2012 - 23:47

    Merci !
    Malick
    Malick
    Age : 29Messages : 159

    Lun 18 Juin 2012 - 20:32

    Merci :love:



    Faire Une Lettrine - Page 14 090302034044742442
    Blue-J
    Blue-J
    FémininAge : 31Messages : 185

    Mar 19 Juin 2012 - 15:46


    C'est trop joli ^^
    Pentacle
    Pentacle
    MasculinAge : 31Messages : 64

    Mer 20 Juin 2012 - 20:02

    Merci, ça donne un beau rendu.
    Requiem
    Requiem
    MasculinAge : 31Messages : 21

    Ven 22 Juin 2012 - 20:06

    Merci !
    Candiice.
    Candiice.
    FémininAge : 27Messages : 11

    Sam 23 Juin 2012 - 17:35

    Merci :3
    Imperatif
    Imperatif
    MasculinAge : 29Messages : 38

    Sam 23 Juin 2012 - 22:47

    Je tiens à voir sa :)
    Merci !
    Lu' Rodrakaset
    Lu' Rodrakaset
    FémininAge : 26Messages : 2

    Lun 25 Juin 2012 - 16:04

    Merci ! o/
    Anonymous
    Invité

    Jeu 28 Juin 2012 - 15:42

      S'il te plait ! *w*

      Et merci aussi ^.-
    Maï-li
    Maï-li
    FémininAge : 32Messages : 30

    Sam 30 Juin 2012 - 10:02

    s'il vous plait ? xD
    AwTch
    AwTch
    MasculinAge : 28Messages : 3

    Sam 30 Juin 2012 - 22:35

    Assez utile Very Happy Merci !
    Alcida
    Alcida
    FémininAge : 35Messages : 33

    Dim 1 Juil 2012 - 16:59

    Très sympa comme effet !



    Faire Une Lettrine - Page 14 Alcida10
    Moony
    Moony
    FémininAge : 24Messages : 14

    Mar 3 Juil 2012 - 13:30

    Merci beaucoup ! Very Happy Je trouve ça très esthétique !



    « La vie est un mystère qu'il faut vivre, et non un problème à résoudre.  »
    Silver Star
    Silver Star
    MasculinAge : 27Messages : 43

    Mar 3 Juil 2012 - 17:27

    thank you. :)
    Kispz.
    Kispz.
    FémininAge : 27Messages : 27

    Mer 4 Juil 2012 - 17:51

    Merci pour l'astuce en tout cas (:



    Faire Une Lettrine - Page 14 Roxetrouky8Faire Une Lettrine - Page 14 Roxetrouky5
    Faire Une Lettrine - Page 14 Roxetrouky9Faire Une Lettrine - Page 14 Roxetrouky4

    féfé20
    féfé20
    FémininAge : 24Messages : 6

    Mer 4 Juil 2012 - 19:15

    Merci du partage !
    Tweety
    Tweety
    FémininAge : 30Messages : 48

    Jeu 5 Juil 2012 - 20:33

    Merci :)
    Arc-En-Ciela
    Arc-En-Ciela
    FémininAge : 28Messages : 37

    Ven 6 Juil 2012 - 4:44

    Merci mômaaaan/pôpaaa *s'enfuie avec les biscuits*

    Bon, j'ai hâte de voir le tutoriel ;P Et un vrai merci d'avance ^^
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 2:06