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.

-48%
Le deal à ne pas rater :
Philips Hue Pack Decouverte 2024 : lightstrip 3M + ampoules E27 X2 + ...
119 € 229 €
Voir le deal

    Les Ombres (sur un texte ou sur un élément)

    Aeden
    Aeden
    FémininAge : 35Messages : 59

    Mer 9 Mai 2012 - 23:39

    Rappel du premier message :



    Bonjour à vous les gens : ici donc on va parler des ombres. Pour se faire... il va falloir réviser les maths car celles-ci opèrent avec ce qu'on appelait au lycée voir au collège : les abscisses et les ordonnées.



    Leçon 1 : Définition :
    • A----Les abscisses (x) : La ligne horizontale. Les valeurs à gauche du zéro sont négatives et à sa droite : positive. (Ex : -10, -5, 0, 5, 10).
    • B-----Les ordonnées (y) : La ligne verticale. Les valeurs positives sont initialement en haut tandis que celles du bas sont négatives.
    • C-----Image : Pour vous projeter, regardez une image tirée de wikipédia : Ici.

      Spoiler:


    ________________________________

    Marre de la théorie ? Je vous comprend... Bon passons à la pratique en commençant par les ombres dans un texte.

    Leçon 2 : Ombres Typographiques :
    • A-----Le style :
      Peu importe que vous employez "div" "span" ou "p", l'astuce restera la même. Pour définir le détail de ces balises on emploi à un moment ou à un autre "style".
      Ce qui peut donner :
      Code:
      <div style="">Votre texte ici</div>
      Ou encore :
      Code:
      <span style="">Votre texte ici</span>
      Ou sinon :
      Code:
      <p style="">Votre texte ici</p>
      Quoi choisir ? J'en sais rien, et ce n'est certainement pas ici que vous l'apprendrez.

    • B-----Nom de l'ombre :

      Il s'agit donc de nommer l'ombre du texte et en anglais on dit donc tout bêtement à notre stupide ordinateur "text-shadow". Vous devriez donc à cette partie-ci de l'exercice obtenir ceci :
      Code:
      <p style="text-shadow: x y w couleur;"> Votre texte, ici.</P>
      Note : Evidement les "x y w" Vont être les données à appliquer pour personnaliser l'ombre.

    • C-----Application :
      Prêt à y appliquer la théorie vu plus haut ?

      Si on prend l'exemple noté ci-dessus, X désigne donc les abscisses, Y : les ordonnées. Pour le W enfin c'est nouveau : ce sera la largeur, diamètre, l'épaisseur de l'ombre, appelez ça comme vous le voulez.

      ce qui donne ceci :
      Exemple type d'une ombre dans une boite.
      Code:
      <p style="text-shadow:2px 2px 3px black;"> Exemple type d'une ombre pour un paragraphe.</p> 

      Spoiler:


    ________________________________

    Voilà pour la typo d'un texte. On peut cependant aussi ombrer les boites... Et sur les boites j'oserai dire qu'il y a encore plus à dire. une fois que vous aurez bien assimilé la façon de procéder pour diriger une ombre (cf : Application des ombres typographiques), vous aurez alors de quoi vous amusez avec ce qui suit :

    Leçon 3 : Ombres appliquées aux boites :
    • A-----Ombre unique :

      *** Pour obtenir ceci :

      On utilise ceci :
      Code:
       Box-shadow: 0px 0px 5px black;


      Ombre
      sur
      Boite


    • B-----Ombres multiples

      Eh oui ça existe ! Exemple avec notre cher carré qui détient ici deux ombres : une jaune et une bleue :



      *** Pour cela on utilise une simple virgule, puis on rajoute la donnée de la seconde ombre. Attention : La seconde donnée va sous la première et les couleurs se fusionnent donc mieux vaut mettre l'ombre la plus petite en première.
      *** En toute logique vous pouvez ainsi rajouter plus de deux ombres ^^

      Ce qui donne :
      Code:
      Box-shadow: 0px 0px 15px yellow,0px 0px 20px blue;

    • C-----Ombre interne :

      Dernière astuce... x_x
      L'ombre interne est une ombre applicable aussi aisément qu'une ombre supplémentaire.
      Exemple avec une ombre rouge (la bordure noire est mise pour montrer sur l'ombre est bien interne) :



      Pour cela in faudra juste ajouter inset à l'ombre que vous souhaitez mettre en intérieur, ce qui donne :
      Code:
      box-shadow: inset 0px 0px 10px RED ;
      Mise avec les autres cela donnerai ceci :
      Code:
      Box-shadow: 0px 0px 15px yellow , 0px 0px 25px blue , inset 0px 0px 10px RED ;



    ________________________________________


    Astuce des ombres terminées, j'espère que ça servira à quelques uns d'entre vous o/


    Dernière édition par Aeden le Lun 27 Mai 2013 - 11:13, édité 2 fois



    Sakura-chan
    Sakura-chan
    FémininAge : 27Messages : 180

    Lun 23 Sep 2013 - 17:23

    Merci !
    Opaline
    Opaline
    FémininAge : 24Messages : 86

    Mar 24 Sep 2013 - 18:03

    Merciii :3



    Les Ombres (sur un texte ou sur un élément) - Page 2 140502022634448028
    Jak SZ
    Jak SZ
    FémininAge : 34Messages : 217

    Mar 1 Oct 2013 - 11:40

    Merci ♥
    Linky
    Linky
    FémininAge : 34Messages : 30

    Mar 1 Oct 2013 - 21:41

    mercii !
    Aile
    Aile
    FémininAge : 36Messages : 134

    Ven 11 Oct 2013 - 17:56

    Aaaah les ombres! Que ferions nous sans elles? Un grande merci à toi.



    Les Ombres (sur un texte ou sur un élément) - Page 2 799284Sanstitre1
    Apokalip'z
    Apokalip'z
    MasculinAge : 31Messages : 290

    Lun 14 Oct 2013 - 14:04

    J'aimerais bien voir tout ça moi Very Happy

    Merci



    Les Ombres (sur un texte ou sur un élément) - Page 2 1424818313-sign-apoka
    riffraff
    riffraff
    MasculinAge : 46Messages : 112

    Mer 23 Oct 2013 - 19:34

    thanks!
    HeartLessB
    HeartLessB
    FémininAge : 26Messages : 78

    Mer 23 Oct 2013 - 22:09

    Merci
    Lyogi
    Lyogi
    MasculinAge : 26Messages : 28

    Sam 26 Oct 2013 - 14:01

    Thanks :)



    Les Ombres (sur un texte ou sur un élément) - Page 2 GDcueV2HCiw_grandsign
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 36Messages : 215

    Sam 26 Oct 2013 - 15:08

    merci beaucoup :)



    ....
    Trych
    Trych
    FémininAge : 29Messages : 81

    Dim 3 Nov 2013 - 1:07

    mici



    Les Ombres (sur un texte ou sur un élément) - Page 2 Just_k10
    Linksys
    Linksys
    MasculinAge : 26Messages : 17

    Jeu 28 Nov 2013 - 1:14

    Merci et je suis entrain d'apprendre sa xD
    Tyarra
    Tyarra
    FémininAge : 24Messages : 75

    Ven 6 Déc 2013 - 18:19

    Mershiii :3
    teck
    teck
    MasculinAge : 33Messages : 63

    Lun 9 Déc 2013 - 12:25

    merci



    Les Ombres (sur un texte ou sur un élément) - Page 2 Signa113
    Cokinelle
    Cokinelle
    FémininAge : 28Messages : 10

    Mer 8 Jan 2014 - 18:39

    Merci! :)
    Grenouille
    Grenouille
    FémininAge : 28Messages : 49

    Mar 14 Jan 2014 - 19:33

    merci
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Sam 29 Mar 2014 - 19:30

    je veux voir ça, thanks ! (:
    Leoguillem
    Leoguillem
    MasculinAge : 25Messages : 137

    Mer 2 Avr 2014 - 15:51

    Merci!



    - Je signe Marabout -
    Théandras
    Théandras
    FémininAge : 24Messages : 25

    Jeu 1 Mai 2014 - 19:27

    Merci !!
    hoterion
    hoterion
    FémininAge : 33Messages : 75

    Dim 4 Mai 2014 - 21:31

    voici donc un petit mot ; merci Very Happy



    Les Ombres (sur un texte ou sur un élément) - Page 2 Sing10
    Jull421
    Jull421
    FémininAge : 30Messages : 145

    Ven 9 Mai 2014 - 0:30

    merci



    Les Ombres (sur un texte ou sur un élément) - Page 2 140228025614860943
    Nonze
    Nonze
    MasculinAge : 31Messages : 85

    Lun 12 Mai 2014 - 1:05

    Merci
    Chatchoum
    Chatchoum
    FémininAge : 33Messages : 43

    Mer 14 Mai 2014 - 16:08

    Merci, même si je ne suis pas sûre de ce que tu vas nous expliquer :)
    Framboaz
    Framboaz
    FémininAge : 31Messages : 23

    Dim 25 Mai 2014 - 14:57

    Merci beaucoup ! J'éspère que ça me sera utile comme tuto Very Happy
    avatar
    Horus
    FémininAge : 27Messages : 56

    Dim 8 Juin 2014 - 22:59

    arigatoooooooooooooooo
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 7:50