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.


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

    Partagez
    avatar
    Aeden
    FémininAge : 28Messages : 59

    le 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:
      Astuce : Pensez AbsciX et ordoneY, parlez kikoulol même si c'est loin d'être élégant, mais au moins vous le retiendrez.


    ________________________________

    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:
      Note : Ici j'ai prononcé la position "à droite". je pense que cela se voit. Pour la mettre à gauche, il faudra mettre la valeur des abscisses en négative (comme expliqué dans le théorie). Cependant il faudra noter que pour faire aller l'ombre en haut, il faudra mettre en négatif. Soucis de Html ou logique que l'ombre soit de base en bas ? Allez savoir m'enfin c'est comme ça...


    ________________________________

    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



    avatar
    Risa
    FémininAge : 29Messages : 238

    le Mar 17 Juin 2014 - 18:17

    Merci, ça me semble intéressant à savoir :)
    avatar
    Nawak
    FémininAge : 19Messages : 112

    le Jeu 10 Juil 2014 - 19:27

    Enfin ! Merci beaucoup ! *0*



    avatar
    Kinjiro
    MasculinAge : 18Messages : 80

    le Ven 18 Juil 2014 - 20:33

    Merci



    Obsidienne
    FémininAge : 20Messages : 19

    le Ven 18 Juil 2014 - 23:14

    Merci !
    avatar
    Lugatique
    MasculinAge : 18Messages : 23

    le Mar 5 Aoû 2014 - 20:44

    merci
    avatar
    Livia666
    FémininAge : 30Messages : 49

    le Jeu 14 Aoû 2014 - 13:27

    Merci beaucoup !
    avatar
    Bzzzz
    FémininAge : 33Messages : 83

    le Ven 29 Aoû 2014 - 22:15

    Merci beaucoup
    avatar
    Natsumi13
    FémininAge : 21Messages : 64

    le Lun 1 Sep 2014 - 14:26

    Merci <3
    avatar
    Mangédéfruiélégumeuh
    MasculinAge : 20Messages : 83

    le Ven 12 Sep 2014 - 22:31

    merci :)
    avatar
    Pee-Boo
    FémininAge : 25Messages : 28

    le Ven 26 Sep 2014 - 14:41

    Merci !
    avatar
    defenrir
    MasculinAge : 31Messages : 57

    le Dim 5 Oct 2014 - 1:40

    merci =)
    avatar
    Liliumini
    FémininAge : 22Messages : 55

    le Mar 14 Oct 2014 - 13:48

    Merci!
    avatar
    The One Pandemonium
    FémininAge : 24Messages : 97

    le Mar 18 Nov 2014 - 20:24

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Jeu 5 Mar 2015 - 12:34

    merci



    Patricia :)
    avatar
    Fondaboxpub
    MasculinAge : 52Messages : 38

    le Jeu 5 Mar 2015 - 12:49

    merci



    avatar
    RaisedByWolves
    FémininAge : 19Messages : 39

    le Ven 6 Mar 2015 - 6:56

    Merci ♥️
    avatar
    Irissia87
    FémininAge : 30Messages : 124

    le Jeu 12 Mar 2015 - 15:51

    merci pour l'astuce!
    avatar
    pinkwinee
    FémininAge : 23Messages : 44

    le Sam 14 Mar 2015 - 16:05

    thanks (:
    avatar
    Artchie
    FémininAge : 26Messages : 42

    le Sam 14 Mar 2015 - 22:21

    Milles mercis <3
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Lun 30 Mar 2015 - 17:19


    Alors, j'ai testé ça ! Parce que je ne connaissais pas les ombres internes et je ne savais pas qu'on pouvait en mettre plusieurs :hum:

    avatar
    Rantanplan
    MasculinAge : 25Messages : 11

    le Jeu 9 Avr 2015 - 22:08

    Hiii j'ai envie de savoir :3 Merci d'avance !
    avatar
    abitbol
    FémininAge : 28Messages : 15

    le Ven 10 Avr 2015 - 16:38

    Merci pour l'aide !! cheers
    avatar
    Bluvery
    FémininAge : 17Messages : 20

    le Sam 11 Avr 2015 - 23:36

    Merki beaucoup ♥
    avatar
    S.Baka
    FémininAge : 23Messages : 13

    le Dim 12 Avr 2015 - 10:39

    Merci du partage, ça va m'être très utile.
    avatar
    Anazera
    MasculinAge : 21Messages : 37

    le Jeu 16 Avr 2015 - 23:55

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Nov 2017 - 2:55