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 :
Display Pokémon japonaise Terastal Festival Ex ...
Voir le deal

    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 25 CKMiDeikSo
    JasLo
    JasLo
    FémininAge : 22Messages : 76

    Mar 11 Nov 2014 - 18:58

    Merci ♥
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Mar 11 Nov 2014 - 20:04

    Merci
    hurudy
    hurudy
    MasculinAge : 43Messages : 40

    Jeu 20 Nov 2014 - 11:59

    Merciiiiiiii merci !
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Lun 24 Nov 2014 - 20:05

    merci du partage



    Faire Une Lettrine - Page 25 27978_signature_never_utopia_dydy_2
    Offrande
    Offrande
    FémininAge : 33Messages : 194

    Sam 29 Nov 2014 - 15:08

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

    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.
    Rosaline
    Rosaline
    FémininAge : 33Messages : 50

    Lun 8 Déc 2014 - 18:35

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



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

    Mar 9 Déc 2014 - 13:58

    Merci d'avance :3
    Millaby
    Millaby
    FémininAge : 29Messages : 45

    Lun 22 Déc 2014 - 20:14

    Merci ~
    Luuny
    Luuny
    FémininAge : 26Messages : 43

    Mar 23 Déc 2014 - 17:19

    Merci aha!
    British Cookie
    British Cookie
    FémininAge : 33Messages : 34

    Ven 9 Jan 2015 - 22:44

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

    Mer 14 Jan 2015 - 13:29

    Meeeerci ! :'3
    avatar
    Lucrèce
    FémininAge : 34Messages : 68

    Sam 24 Jan 2015 - 17:33

    Merci !
    Malf Claymore
    Malf Claymore
    FémininAge : 30Messages : 126

    Sam 31 Jan 2015 - 23:37

    merci
    Krager
    Krager
    MasculinAge : 29Messages : 68

    Sam 7 Mar 2015 - 23:16

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

    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.
    Kovu
    Kovu
    FémininAge : 23Messages : 257

    Jeu 26 Mar 2015 - 23:39

    Merci !
    Ammoniak
    Ammoniak
    FémininAge : 37Messages : 15

    Ven 27 Mar 2015 - 13:11

    Merci beaucoup :3
    Moon Heart
    Moon Heart
    FémininAge : 24Messages : 37

    Dim 29 Mar 2015 - 20:39

    Mot magique: S'il te plait :3
    Artchie
    Artchie
    FémininAge : 32Messages : 43

    Dim 29 Mar 2015 - 20:53

    :love: mais vous êtes tous tellement super
    Amarante
    Amarante
    FémininAge : 26Messages : 40

    Mer 1 Avr 2015 - 19:35

    Merci ! Very Happy
    Leonce
    Leonce
    MasculinAge : 29Messages : 95

    Jeu 2 Avr 2015 - 19:56

    Merci beaucoup pour ce tuto :))



      Faire Une Lettrine - Page 25 453394sign_leonce_2 Faire Une Lettrine - Page 25 4aa8c91ab2e59logo
    Masamune
    Masamune
    FémininAge : 29Messages : 10

    Dim 12 Avr 2015 - 15:09

    Idée intéressante de tutoriel. Merci du partage ! Very Happy
    Opale
    Opale
    FémininAge : 33Messages : 109

    Mar 14 Avr 2015 - 11:54

    Merci :)
    Anazera
    Anazera
    MasculinAge : 27Messages : 37

    Mar 14 Avr 2015 - 23:50

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2024 - 5:01