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

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/

Merci !!