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.


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

    Aeden
    Aeden
    FémininAge : 34Messages : 59

    Mer 9 Mai 2012 - 23:39



    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



    Anastasia Roskaff
    Anastasia Roskaff
    FémininAge : 24Messages : 32

    Dim 6 Jan 2013 - 11:52

    Merci beaucoup o/ Et très joli avatar *o*
    missing_heroes
    missing_heroes
    FémininAge : 30Messages : 18

    Dim 12 Mai 2013 - 0:32

    merci ^^
    Elewy
    Elewy
    FémininAge : 24Messages : 23

    Sam 25 Mai 2013 - 15:38

    Merci beaucoup Very Happy



    Les Ombres (sur un texte ou sur un élément) Dragon11
    Fantôme
    Fantôme
    FémininAge : 23Messages : 13

    Dim 9 Juin 2013 - 16:02

    MERCI !!



    Les Ombres (sur un texte ou sur un élément) Bouh10
    Merci Wellan
    Mylirou
    Mylirou
    FémininAge : 27Messages : 7

    Dim 16 Juin 2013 - 11:36

    merci !
    Sieg Hart
    Sieg Hart
    MasculinAge : 34Messages : 16

    Mar 25 Juin 2013 - 16:47

    Merci
    titan1
    titan1
    MasculinAge : 29Messages : 220

    Mar 25 Juin 2013 - 22:35

    Merci



    Seule la mort met fin au devoir
    Adrenaline Junkie.
    Adrenaline Junkie.
    FémininAge : 31Messages : 13

    Sam 20 Juil 2013 - 0:15

    merci :heart:
    Adichou*
    Adichou*
    FémininAge : 31Messages : 71

    Sam 20 Juil 2013 - 22:46

    C'est gentil, merci

    Par contre je n'arrive pas à faire marcher les ombres intérieur avec un texte, est-ce possible?
    Dimtriff
    Dimtriff
    FémininAge : 25Messages : 12

    Dim 11 Aoû 2013 - 16:52

    Oh des cours de maths !
    Blaade
    Blaade
    MasculinAge : 28Messages : 13

    Lun 12 Aoû 2013 - 5:38

    Je veux voir ça :p
    Shanilae
    Shanilae
    FémininAge : 30Messages : 78

    Lun 12 Aoû 2013 - 14:35

    Merci =D
    Ondée
    Ondée
    FémininAge : 25Messages : 659

    Jeu 15 Aoû 2013 - 17:17

    Merci !



    EN VACANCES JUSQU'À DÉBUT AOÛT - TOTALEMENT ABSENTE
    Kiss Valentine
    Kiss Valentine
    FémininAge : 26Messages : 5

    Jeu 15 Aoû 2013 - 20:15

    Merci ♥
    Rodeuse
    Rodeuse
    FémininAge : 30Messages : 142

    Sam 17 Aoû 2013 - 21:35

    merci
    Faucon
    Faucon
    FémininAge : 24Messages : 64

    Mer 21 Aoû 2013 - 10:33

    Merci !
    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    Jeu 22 Aoû 2013 - 12:41

    merci



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Mar 27 Aoû 2013 - 18:34

    Merci ! Very Happy



    Les Ombres (sur un texte ou sur un élément) 878302signaturevegeta
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Jeu 29 Aoû 2013 - 13:43

    merci !
    avatar
    donov89
    MasculinAge : 33Messages : 8

    Dim 1 Sep 2013 - 2:29

    Merci !
    Shinøbi
    Shinøbi
    MasculinAge : 23Messages : 29

    Mar 3 Sep 2013 - 15:05

    Merci !
    C. Hook
    C. Hook
    FémininAge : 26Messages : 45

    Jeu 5 Sep 2013 - 2:47

    merci ^^
    Jujudu44
    Jujudu44
    FémininAge : 36Messages : 61

    Sam 21 Sep 2013 - 22:47

    Merci infiniment Wink
    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Dim 22 Sep 2013 - 0:32

    Un p'tit mot pour voir tout ça ? Euh... Carotte ?
    /SBAFF/

    Merci beaucoup :



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:37