1 résultat trouvé pour FF0000

par Mäven
le Jeu 23 Mai 2019 - 10:42
 
Rechercher dans: HTML/CSS
Sujet: Les Ombrages
Réponses: 0
Vues: 774

Les Ombrages


Les Ombrages


Salut ! Very Happy

Nous allons voir ici les "ombrages". Mais qu'est-ce donc ? Rien de bien mystérieux : nous allons voir comment ajouter des ombres aux textes et aux boîtes.

Les ombres sur le texte

Pour mettre une ombre sur un texte, on utiliser la propriétés text-shadow. L'attribut CSS s'écrit de cette façon :
Code:
text-shadow: Xpx Ypx Zpx #couleur;

X = le décalage horizontal par rapport au texte
Y = le décalage vertical par rapport au texte
Z = la netteté de l'ombre (0 = net (comme un contour) ; plus on s'éloigne de 0, plus l'ombre est floue)
couleur = la couleur de l'ombre.

Par exemple :

Pour une ombre rouge, très floue et assez "loin" du texte :

text-shadow:2px 3px 9px #FF0000


Code:
<p style="text-shadow:2px 3px 9px #FF0000;">text-shadow:2px 3px 9px #FF0000</p>


Pour une ombre très proche du texte et nette :

text-shadow:1px 1px 0px #000;


Code:
<p style="text-shadow:1px 1px 0px #000;color:#fff;">text-shadow:1px 1px 0px #000;</p>


Idea Il est possible de mettre des valeurs négatives pour les décalages horizontaux et verticaux, pour que l'ombre soit sur la gauche et/ou le haut et non vers la droite et le bas :

text-shadow:1px 1px 0px #000;


Code:
<p style="text-shadow:-1px 1px 0px #000;color:#fff;">text-shadow:1px 1px 0px #000;</p>


Les ombres sur les éléments

Pour mettre des ombres sur les éléments (div, image, tableau, etc.), on va utiliser la propriété : box-shadow et le codage est le même que pour le text-shadow, à savoir :
Code:
box-shadow: Xpx Ypx Zpx #couleur;

X = le décalage horizontal par rapport à l’élément
Y = le décalage vertical par rapport à l’élément
Z = la netteté de l'ombre (0 = net (comme un contour) ; plus on s'éloigne de 0, plus l'ombre est floue)
couleur = la couleur de l'ombre.

Par exemple :

On reprend les mêmes effets que sur les textes.
box-shadow:2px 3px 9px #FF0000

Code:
<div style="box-shadow:2px 3px 9px #FF0000;">box-shadow:2px 3px 9px #FF0000</div>

box-shadow:1px 1px 0px #000;

Code:
<div style="box-shadow:1px 1px 0px #000;background:#fff;">box-shadow:1px 1px 0px #000;</div>


Idea Il est possible de mettre des valeurs négatives pour les décalages horizontaux et verticaux, pour que l'ombre soit sur la gauche et/ou le haut et non vers la droite et le bas :
box-shadow:1px 1px 0px #000;

Code:
<div style="box-shadow:-1px -1px 0px #000;background:#fff;">box-shadow:1px 1px 0px #000;</div>


D'autres possibilités

La taille de l'ombre d'un élément : on fait un cadre

Le spread est une valeur s'ajoutant entre le "flou" et la couleur : elle permet de redimensionner l'ombre. Par exemple on peut faire un cadre complet sur le texte ou sur une boite avec un "spread" à 2px :
box-shadow:2px 3px 9px #FF0000

Code:
<div style="box-shadow:0px 0px 0px 2px #FF0000;">box-shadow:2px 3px 9px #FF0000</div>


Un contour complet sur un texte

On peut aussi faire un contour complet sur du texte : pour cela on va ajouter 3 couches au text-shadow (il y en aura donc 4), séparées par une virgule, afin d'appliquer un contour de tous les cotés
Par exemple :

Mon texte avec une bordure


Code:
<p style="color: white; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,-1px -1px 0 #000">Mon texte avec une bordure</p>


Et on peut décider de mettre certains contour d'une couleur, d'autre d'une autre :

Mon texte avec une bordure


Code:
<p style="color: white; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #FF0000 ,-1px -1px 0 #000">Mon texte avec une bordure</p>


Des ombres vers l'intérieur du bloc

Il est possible de mettre l'ombre à l'intérieur de l'élément : il suffit d'ajouter "inset" :
box-shadow:2px 3px 9px #FF0000

Code:
<div style="box-shadow:2px 3px 9px #FF0000 inset;">box-shadow:2px 3px 9px #FF0000</div>

box-shadow:1px 1px 0px #000;

Code:
<div style="box-shadow:1px 1px 0px #000 inset;background:#fff ;">box-shadow:1px 1px 0px #000;</div>


Pour aller encore plus loin

Tu as énormément de possibilité sur les ombres : tu peux faire des dégradés d'ombre par exemple. Pour cela, il te suffit d'ajouter les différentes couches les unes à la suite des autres, séparées par une virgule :

un texte en feu par exemple !


Code:
<p style="text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color: #000;"> un texte en feu par exemple ! </p>





Et voilà, tu en sais déjà pas mal sur les ombrages maintenant Very Happy
Ce n'est pas toujours facile de penser à tout. Il existe des générateurs pour ces ombres (qui en plus t'aide pour les effets) : ici pour le text-shadow et ici pour le box-shadow Smile

Sauter vers:

Les coups de ♥ des Râleuses

Post-It des Râleuses