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

Mer 9 Mai 2012 - 23:39

Aeden

Age : 35Messages : 59

Mer 9 Mai 2012 - 23:39

Rappel du premier message :

#html #auteur_Aeden #toutes_les_versions

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 ;