Catégories à fermer


Aller en bas
Mäven
Informations : Idea Viens papoter avec nous sur le discord

Messages : 1098
Voir le profil de l'utilisateurhttp://tambouille-raleuses.forumactif.com/

Les Ombrages Empty Les Ombrages

le Jeu 23 Mai - 10:42

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

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne a nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @