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



    avatar
    JasLo
    FémininAge : 15Messages : 76

    le Mar 11 Nov 2014 - 18:58

    Merci ♥
    avatar
    Flaura
    FémininAge : 14Messages : 151

    le Mar 11 Nov 2014 - 20:04

    Merci
    avatar
    hurudy
    MasculinAge : 36Messages : 40

    le Jeu 20 Nov 2014 - 11:59

    Merciiiiiiii merci !
    avatar
    Dydy
    FémininAge : 26Messages : 490

    le Lun 24 Nov 2014 - 20:05

    merci du partage



    avatar
    Offrande
    FémininAge : 26Messages : 186

    le Sam 29 Nov 2014 - 15:08

    Merciiii beaucoup <3 Très pratique et jolie pour délimiter les paragraphes d'un sujet :)
    avatar
    âme
    FémininAge : 51Messages : 154

    le Dim 30 Nov 2014 - 14:20

    Merci Very Happy



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    Rosaline
    FémininAge : 26Messages : 50

    le Lun 8 Déc 2014 - 18:35

    Cela m'intéresse bien! Merci du partage! :hug:



    JE SOUTIENS
    Feathers of Fate
    avatar
    Dark-Pandaa
    FémininAge : 15Messages : 10

    le Mar 9 Déc 2014 - 13:58

    Merci d'avance :3
    avatar
    Millaby
    FémininAge : 21Messages : 43

    le Lun 22 Déc 2014 - 20:14

    Merci ~
    avatar
    Luuny
    FémininAge : 19Messages : 43

    le Mar 23 Déc 2014 - 17:19

    Merci aha!
    avatar
    British Cookie
    FémininAge : 26Messages : 34

    le Ven 9 Jan 2015 - 22:44

    Merci, je tente de suite **
    Blue
    MasculinAge : 19Messages : 36

    le Mer 14 Jan 2015 - 13:29

    Meeeerci ! :'3
    Lucrèce
    FémininAge : 27Messages : 63

    le Sam 24 Jan 2015 - 17:33

    Merci !
    avatar
    Malf Claymore
    FémininAge : 22Messages : 125

    le Sam 31 Jan 2015 - 23:37

    merci
    avatar
    Krager
    MasculinAge : 22Messages : 38

    le Sam 7 Mar 2015 - 23:16

    @Siria a écrit:On dit, merci par avance ?^^
    avatar
    Kietah
    FémininAge : 20Messages : 9

    le Lun 9 Mar 2015 - 23:09

    Depuis le temps que je cherche, merci *-*



    « Qui t'a donné une philosophie aussi gaie ?

    - L'habitude du malheur. Je me presse de rire de tout, de peur d'être obligé d'en pleurer. »

    Pierre Augustin Caron de Beaumarchais.
    avatar
    Kovu
    FémininAge : 15Messages : 251

    le Jeu 26 Mar 2015 - 23:39

    Merci !



    avatar
    Ammoniak
    FémininAge : 30Messages : 13

    le Ven 27 Mar 2015 - 13:11

    Merci beaucoup :3
    avatar
    Moon Heart
    FémininAge : 17Messages : 37

    le Dim 29 Mar 2015 - 20:39

    Mot magique: S'il te plait :3
    avatar
    Artchie
    FémininAge : 25Messages : 42

    le Dim 29 Mar 2015 - 20:53

    :love: mais vous êtes tous tellement super
    avatar
    Amarante
    FémininAge : 19Messages : 39

    le Mer 1 Avr 2015 - 19:35

    Merci ! Very Happy
    avatar
    Leonce
    MasculinAge : 22Messages : 95

    le Jeu 2 Avr 2015 - 19:56

    Merci beaucoup pour ce tuto :))



    avatar
    Masamune
    FémininAge : 22Messages : 10

    le Dim 12 Avr 2015 - 15:09

    Idée intéressante de tutoriel. Merci du partage ! Very Happy
    avatar
    Opale
    FémininAge : 25Messages : 108

    le Mar 14 Avr 2015 - 11:54

    Merci :)
    avatar
    Anazera
    MasculinAge : 20Messages : 37

    le Mar 14 Avr 2015 - 23:50

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 30 Mai 2017 - 11:08