Avec l'avènement de la norme CSS3 a introduit la propriété box-shadow, qui est devenue largement utilisée parmi les développeurs Web, car elle permet d'ajouter facilement une ou plusieurs ombres à la boîte d'un élément pour donner l'effet visuel souhaité.

Dans l'article précédent, nous avons examiné la propriété border-radius : en l'utilisant, vous pouvez obtenir une ombre avec des coins arrondis. Par analogie avec une ombre de texte (text-shadow), vous pouvez créer plusieurs ombres, elles sont appliquées selon Axe z d'avant en arrière (avec la première ombre donnée en haut).

Examinons de plus près la syntaxe de cette propriété moderne :

Considérons dans l'ordre les valeurs possibles de cette propriété :

Signification	Description
aucun	L'ombre n'est pas affichée. Ceci est la valeur par défault.
encart	Valeur facultative. Si cette valeur n'est pas spécifiée (valeur par défaut), l'ombre sera à l'extérieur de l'élément et créera l'effet d'un élément bombé. Si l'encart de mot-clé (valeur) est présent, l'ombre tombera à l'intérieur de l'élément et créera un effet bosselé. En d’autres termes, il s’agit du passage d’une ombre extérieure à une ombre intérieure.
h-ombre	Valeur requise. Définit l'emplacement de l'ombre horizontale. Les valeurs négatives sont autorisées.
v-ombre	Valeur requise. Définit l'emplacement de l'ombre verticale. Les valeurs négatives sont autorisées.
rayon de flou	Valeur facultative. Définit le rayon de flou. Plus la valeur est élevée, plus le flou est important, ce qui rend l'ombre plus grande et plus claire. Si la valeur n'est pas spécifiée, la valeur sera 0 (ombres nettes et distinctes). Les valeurs négatives ne sont pas autorisées.
rayon de propagation	Valeur facultative. Taille de l'ombre (rayon d'étirement de l'ombre). Avec des valeurs positives, l'ombre s'étendra et avec des valeurs négatives, elle rétrécira. Si aucune valeur n'est précisée, la valeur sera 0 (l'ombre correspond à la taille de l'élément).
couleur	Valeur facultative. Définit la couleur de l'ombre (HEX, RGB, RGBA, HSL, HSLA, "Couleurs prédéfinies"). La valeur par défaut est le noir.

Les principaux points que vous devez comprendre pour créer des ombres pour les éléments sont :

Je voudrais attirer votre attention sur le fait que la propriété box-shadow est actuellement prise en charge par tous les navigateurs modernes :

Propriété			Opéra		IExplorateur	Bord
boîte ombre	10.0 4.0 -kit Web-	4.0 3.5 -moz-	10.5	5.1 3.1 -kit Web-	9.0	12.0

Si vous souhaitez étendre la prise en charge de certains navigateurs, notamment mobiles iOS 3.2 - 4.3 Et Android 2.1 - 3, il est alors recommandé d'utiliser les préfixes constructeur et d'utiliser la syntaxe suivante (dans les exemples de l'article, la syntaxe ne sera utilisée que pour les navigateurs modernes) :

-webkit-box-shadow : valeur ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 et Android 2.1 - 3 */-moz-box-shadow : valeur ; /* Firefox 3.5 - 3.6 */ box-shadow : valeur ; /* tableau ci-dessus */

Passons à la pratique et commençons par un exemple simple dans lequel nous ajoutons une ombre aux éléments :

Le résultat de notre exemple :

Utiliser plusieurs ombres

Dans l'exemple suivant, je propose de considérer l'effet intéressant de mélange de couleurs qui peut être obtenu en utilisant plusieurs ombres :

• Deux blocs de largeur et de hauteur fixes (15em et 10em), ajout d'un rembourrage sur tous les côtés (2em) et réglage des blocs sur une ligne de bloc pour pouvoir les aligner.
• Pour d'abord bloquer avec classe .test nous avons indiqué quatre des ombres avec différentes valeurs d'ombre horizontales et verticales afin que l'élément ait des ombres différentes de tous les côtés. Le rayon de flou pour toutes les ombres a été défini de la même manière. La couleur de chaque ombre est différente et est spécifiée à l'aide de couleurs prédéfinies.
• Pour deuxième bloquer avec classe .test2 nous avons indiqué quatre ombres avec différentes valeurs d'ombre horizontales et verticales. Le rayon de flou de toutes les ombres a été défini sur le même, tandis que l'étirement de l'ombre a été défini sur négatif, ce qui a entraîné une diminution de l'ombre elle-même. La couleur de chaque ombre est différente et est spécifiée à l'aide du système RGBA.

Le résultat de notre exemple :

Utiliser des ombres pour les images

Le dernier exemple de cet article se concentrera sur l'utilisation des ombres pour les images. Je voudrais immédiatement attirer votre attention sur le fait que vous pouvez directement spécifier l'ombre de l'élément HTML Cela ne fonctionnera pas, mais nous avons la possibilité de spécifier une image comme arrière-plan de l'élément qui nous intéresse, puis d'attribuer l'ombre dont nous avons besoin à cet élément.

Nous examinerons en détail le travail avec les images d'arrière-plan dans l'article du manuel "", et maintenant, pour mettre fin à l'étude de l'utilisation des ombres, nous l'aborderons superficiellement et utiliserons l'image comme arrière-plan d'un élément dans ce qui suit exemple:

• Deux blocs de largeur et de hauteur fixes (237px et 232px), ajout de marges pour tous les côtés (2em) et définition des blocs sur une ligne de bloc pour pouvoir les aligner. Nous avons défini la taille du bloc de 237 px sur 232 px à la taille de l'image, de sorte qu'à ce stade de la formation, nous n'avons pas eu à redimensionner l'image pour l'adapter à l'élément et affecter les propriétés CSS qui devraient être étudiées ultérieurement. (dans l'article du manuel " ").
• Pour d'abord bloquer avec classe .test Nous avons spécifié une valeur nulle pour l'ombre horizontale et verticale, mais en même temps nous avons spécifié un rayon de flou de 50 px et l'avons élargi en définissant un rayon d'étirement de 10 px. La couleur de l'ombre était indiquée par une couleur prédéfinie (violet). De plus, nous avons spécifié le mot-clé inset dans la déclaration, ce qui fait que l'ombre tombe à l'intérieur de l'élément. En d’autres termes, nous avons créé une ombre intérieure de l’élément.
• Pour deuxième bloquer avec classe .test2 Nous avons spécifié une valeur nulle pour l'ombre horizontale et verticale, mais en même temps nous avons spécifié un rayon de flou de 50 px et l'avons élargi en définissant un rayon d'étirement de 10 px. La couleur de l'ombre est spécifiée en mode RGBA.

Le résultat de notre exemple :

Riz. 98 Exemple d'utilisation d'ombres pour des images en CSS (propriété box-shadow)

Questions et tâches sur le sujet

Avant de passer au sujet suivant, effectuez le devoir pratique :

Si vous rencontrez des difficultés pour effectuer la tâche pratique, vous pouvez toujours ouvrir l'exemple dans une fenêtre séparée et inspecter la page pour comprendre quel code CSS a été utilisé.

2016-2020 Denis Bolshakov, vous pouvez envoyer des commentaires et suggestions sur le site à [email protected]

La propriété box-shadow ajoute une ou plusieurs ombres à un élément. L'ombre est une copie de l'élément décalée de la distance spécifiée. Les ombres peuvent être externes ou internes, floues ou plates, et peuvent suivre les contours de blocs aux coins arrondis. À l’aide du mot-clé inset, des ombres sont créées à l’intérieur de l’élément, rendant l’élément visuellement volumineux ou déprimé.

Comment créer une ombre de boîte à l'aide de la propriété box-shadow

Prise en charge du navigateur

C'EST À DIRE: 9.0
Bord: 12.0
Firefox : 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -kit Web-
Safari: 5.1, 3.1 -kit Web-
Opéra: 11.5
iOS-Safari : 5.1, 3.1 -kit Web-
Navigateur Android : 4.0, 2.1 -webkit-

1. Syntaxe de la propriété Box-shadow

La propriété box-shadow attache une ou plusieurs ombres à une boîte. La propriété accepte soit la valeur none , qui indique aucune ombre, soit une liste d'ombres séparées par des virgules, classées du début à la fin.

Chaque ombre est une ombre distincte, représentée par 2 à 4 longueurs, une couleur facultative et un mot-clé d'encart facultatif. Longueurs autorisées 0 ; les couleurs omises correspondent par défaut à la valeur de la propriété color.

La propriété n'est pas héritée.

Riz. 1. Syntaxe de la propriété Box-shadow

Valeurs:
décalage x	Définit le décalage horizontal de l'ombre. Une valeur positive dessine une ombre décalée à droite du texte, une longueur négative dessine une ombre à gauche.
décalage y	Définit le décalage vertical de l'ombre. Une valeur positive déplace l'ombre vers le bas, une valeur négative la déplace vers le haut.
se brouiller	Définit le rayon de flou. Les valeurs négatives ne sont pas autorisées. Si la valeur de flou est nulle, alors le bord de l'ombre est net. Sinon, plus la valeur est élevée, plus le bord de l’ombre est flou.
élongation	Définit la distance d'augmentation de l'ombre. Les valeurs positives entraînent l'expansion de l'ombre dans toutes les directions selon le rayon spécifié. Les valeurs négatives entraînent un rétrécissement de l'ombre. Pour les ombres intérieures, agrandir l’ombre signifie compresser la forme du périmètre de l’ombre.
couleur	Définit les ombres. S'il n'y a pas de couleur, la couleur utilisée est issue de la propriété color. Pour Safari, la couleur de l'ombre doit être spécifiée.
encart	Change l'ombre projetée du bloc d'une ombre extérieure à une ombre intérieure.
aucun	La valeur par défaut signifie aucune ombre.
initial	Définit la valeur de la propriété sur la valeur par défaut.
hériter	Hérite de la valeur de propriété de l'élément parent.

Les effets d'ombre sont appliqués comme suit : la première ombre est au-dessus et les autres sont derrière. Les ombres n'affectent pas la mise en page et peuvent chevaucher d'autres éléments ou leurs ombres. En termes de contextes d'empilement et d'ordre de dessin, les ombres extérieures d'un élément sont dessinées directement sous l'arrière-plan de cet élément, et les ombres intérieures d'un élément sont dessinées directement au-dessus de l'arrière-plan de cet élément (sous la bordure et border-image , le cas échéant).

Si un élément comporte plusieurs cases, elles reçoivent toutes des ombres, mais les ombres ne sont dessinées que là où les bordures seront également dessinées ; voir box-decoration-break.

Les ombres ne provoquent pas de défilement et n'augmentent pas la taille de la zone de défilement.

2. Exemples de blocs d'ombre

2.1. Ombre intérieure

.example-shadow-1 ( arrière-plan : #e6e3df ; text-align : center ; ) .example-shadow-1 span ( marge : 50px ; hauteur : 100px ; largeur : 200px ; affichage : bloc en ligne ; box-shadow : encart 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1); )

2.2. Ombre plate d'un côté

plat

plat

.example-shadow-2 ( arrière-plan : beige ; alignement du texte : centre ; ) .example-shadow-2 a ( affichage : bloc en ligne ; rayon de bordure : 5 px ; remplissage : 15 px 35 px ; taille de la police : 22 px ; texte -décoration : aucune ; marge : 20px ; couleur : blanc ; arrière-plan : #55acee ; ​​box-shadow : 0 5px 0 #3C93D5 ; transition : .3s ; ) .example-shadow-2 a:hover ( arrière-plan : #6FC6FF ; )

2.3. Ombre de conception matérielle

.example-shadow-3 ( arrière-plan : #e8e8e8 ; text-align : center ; ) .example-shadow-3 span ( arrière-plan : blanc ; affichage : bloc en ligne ; largeur : 200 px ; hauteur : 100 px ; marge : 50 px ; boîte -ombre : 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); )

L'ordre d'enregistrement est fondamentalement important. La première valeur est toujours le décalage le long de l'axe X, la seconde le long de l'axe Y.

Si un décalage n'est pas nécessaire le long de l'un des axes, mettez-le à zéro :

Class(box-shadow: 0 8px;) – déplace l'ombre uniquement le long de l'axe Y

Résultat

Classe (box-shadow : 8px 8px ;) – déplacement le long des deux axes

Résultat

Valeur négative pour les axes d'ombre de boîte

L'ombre se déplacera dans la direction opposée :

Class(box-shadow: -8px 8px;) – décale l'ombre avec une valeur négative le long de l'axe X

Résultat

Rayon de flou d'ombre

Troisième paramètre de propriété boîte ombre. Si elle n'est pas spécifiée, la valeur est 0 et la taille de l'ombre est égale à la taille de l'élément auquel elle est appliquée.

Class(box-shadow: 0 48px 0;) – l'ombre duplique les dimensions de l'élément auquel elle est appliquée

Résultat

Lorsque la valeur est supérieure à zéro, les bords perdent leur définition, l'ombre devient plus grande et visuellement plus claire. Le flou est appliqué de tous les côtés :

Class(box-shadow: 0 0 8px;) – pas de décalage, seulement du flou

Résultat

Classe (box-shadow: 0 8px 8px;) – Décalage et flou de l'axe Y

Résultat

Une valeur négative est considérée comme une erreur et l’ombre ne sera pas affichée du tout.

Rayon d'étirement de l'ombre

Quatrième paramètre de propriété boîte ombre. Modifie la taille de l'ombre par rapport à l'élément. S'étire dans toutes les directions :

Class(box-shadow: 0 0 0 8px;) – pas de déplacement ni de flou, seulement un étirement

Résultat

Dans ce cas, l'ombre est 16 pixels plus grande que l'élément en largeur et en hauteur : 8px gauche + 8px droite et 8px haut + 8px bas.

Valeur d'étirement de l'ombre négative en CSS

L'ombre ne s'étire pas, mais se rétrécit de tous les côtés de la valeur spécifiée :

Class(box-shadow: 0 16px 0 -8px;) – diminue l'ombre avec une valeur négative

Résultat

Couleur de l'ombre

Par défaut, la couleur de l'ombre duplique la couleur de la police : comme dans les exemples ci-dessus.

La couleur de l'ombre est spécifiée dans n'importe quel format CSS disponible :

• #ff0009
• RVB (255, 0, 9)
• hsl(358, 100 %, 50 %) ;

Donnez à l'élément une ombre bleue :

Classe (box-shadow : 0 8px #3a8fe7 ;)

Résultat

Ombre intérieure

Paramètre encart affiche une ombre à l'intérieur du bloc.

Contrairement aux options répertoriées ci-dessus, il n’y a pas d’ordre d’écriture strict. Les deux options donneront le même résultat :

Box-shadow : 0 8px #3a8fe7 encart ; box-shadow : encart 0 8px #3a8fe7 ;

Résultat

La deuxième option est plus facile à comprendre lors de la lecture du code.

Plusieurs ombres

Plusieurs ombres sont spécifiées, séparées par des virgules. Ordre d'affichage de haut en bas :

Classe (box-shadow : 0 8px #3a8fe7, 0 16px #3ae7af; )

Résultat

Si vous changez de place, l'ombre bleue ne sera pas visible :

Classe (box-shadow : 0 16px #3ae7af, 0 8px #3a8fe7; )

Résultat

Les ombres intérieure et extérieure sont définies en même temps :

Classe (box-shadow : 0 16px #3ae7af, encart 0 8px #3a8fe7; )

Résultat

Ombre arrondie

Si un élément reçoit la propriété rayon de frontière, l'ombre aura des coins arrondis.

Classe (box-shadow : 0 16px #3a8fe7 ; border-radius : 8px ; )

Résultat

En définissant l'étendue de l'ombre, nous augmentons son arrondi. Par exemple, le rayon de bordure est de 8 px et l'étirement de l'ombre est de 4.

8+4=12px est le rayon d'arrondi de l'ombre.

Classe (box-shadow : 0 16px 0 4px #3a8fe7 ; border-radius : 8px ; )

Résultat

Le même principe s'applique pour réduire l'ombre lorsque la valeur est négative.

8+(-4)=4px - nous obtenons un arrondi d'ombre deux fois plus petit.

Si la compression de l'ombre est supérieure au rayon de bordure, nous obtiendrons une ombre à angles droits. Par exemple, la compression est de 16 px.

8+(-16)=(-8), mais le congé ne peut pas avoir une valeur négative et zéro sera appliqué.

Classe (box-shadow : 0 24px 0 -16px #3a8fe7 ; border-radius : 8px ; )

Résultat

Propriété CSS boîte ombre Pris en charge par tous les navigateurs populaires à l'exception d'Opera Mini.

Block Shadow est un excellent effet tridimensionnel qui donne du réalisme et du volume aux blocs de sites Web. Quand j'ai commencé à étudier (il y a environ 5-6 ans), je n'avais aucune idée de l'existence, et lors de la création d'un site, j'ai dû faire de l'ombre des blocs une image. C’était très gênant et cela ne se passait pas toujours comme je le souhaitais. Grâce à la puissance du CSS, qui a facilité le travail des web designers. Aujourd'hui, je vais vous montrer comment créer une ombre pour les blocs en CSS.

Pour ajouter une ombre en CSS, utilisez la propriété boîte ombre .

1. décalez l'ombre horizontalement (jusqu'à 100 px vers la droite, jusqu'à -100 px vers la gauche) ;
2. décalage vertical (jusqu'à 100 px vers le bas, jusqu'à -100 px vers le haut) ;
3. ombre floue (0 - ombre claire, 100 - ombre très floue) ;
4. étirer l'ombre (jusqu'à 100px - étirement, jusqu'à -100px - compression) ;
5. couleur de l'ombre ;
6. encart - l'ombre est à l'intérieur de l'élément, sans encart, l'ombre sera vers l'extérieur.

Résultat :

Tableau avec ombres :

code	Exemple:
ombre de la boîte : 0px 13px 17px -6px #000000 ;
ombre de la boîte : 10px -10px 0px -6px #000000 ;
ombre de la boîte : 10px 13px 0px -6px #000000 ;
boîte-ombre : 1px 1px 32px -6px #000000 ;
ombre de la boîte : -1px 23px 41px -25px #000000 ;
boîte-ombre : -1px 23px 41px -25px #4dc13c ;
box-shadow : -10px -10px 40px -6px #000000 encart ;
boîte-ombre : 7px 10px 23px -8px #92a9e7 ;

À l'aide d'une ombre, vous pouvez créer un bloc tridimensionnel :

Code	Exemple
boîte-ombre : 1px 0px RVB (220 195,35), 1px 1px RVB (192 167,7), 2px 1px RVB (219 194,34), 2px 2px RVB (191 166,6), 3px 2px RVB (218 193,33), 3px 3px RVB (190 165,5), 4px 3px RVB (217 192,32), 4px 4px RVB (189 164,4), 5px 4px RVB (216 191,31), 5px 5px RVB (188 163,3), 6px 5px RVB (215 190, 30), 6px 6px RVB (187 162,2), 7px 6px RVB (214 189,29), 7px 7px RVB (186 161,1), 8px 7px RVB (213 188,28), 8px 8px RVB (185 160,0), 9px 8px RVB (212 187,27), 9px 9px RVB (184 159,0) ;
box-shadow : -1px 0px rgb(220 195,35), -1px 1px rgb(192 167,7), -2px 1px rgb(219 194,34), -2px 2px rgb(191 166,6), -3px 2px rgb(218 193 ,33), -3px 3px RVB (190 165,5), -4px 3px RVB (217 192,32), -4px 4px RVB (189 164,4), -5px 4px RVB (216 191,31), -5px 5px RVB (188 163 ,3), -6px 5px RVB (215 190,30), -6px 6px RVB (187 162,2), -7px 6px RVB (214 189,29), -7px 7px RVB (186 161,1), -8px 7px RVB (213 188 ,28), -8px 8px RVB (185 160,0), -9px 8px RVB (212 187,27), -9px 9px RVB (184 159,0) ;
box-shadow : -1px -0px RVB (220 195,35), -1px -1px RVB (192 167,7), -2px -1px RVB (219 194,34), -2px -2px RVB (191 166,6), -3px -2px RVB (218 193,33), -3px -3px RVB (190 165,5), -4px -3px RVB (217 192,32), -4px -4px RVB (189 164,4), -5px -4px RVB (216 191, 31), -5px -5px RVB (188 163,3), -6px -5px RVB (215 190,30), -6px -6px RVB (187 162,2), -7px -6px RVB (214 189,29), -7px - 7px RVB (186 161,1), -8px -7px RVB (213 188,28), -8px -8px RVB (185 160,0), -9px -8px RVB (212 187,27), -9px -9px RVB (184 159,0 );
box-shadow : 1px -0px RVB (220 195,35), 1px -1px RVB (192 167,7), 2px -1px RVB (219 194,34), 2px -2px RVB (191 166,6), 3px -2px RVB (218 193 ,33), 3px -3px RVB (190 165,5), 4px -3px RVB (217 192,32), 4px -4px RVB (189 164,4), 5px -4px RVB (216 191,31), 5px -5px RVB (188 163 ,3), 6px -5px RVB (215 190,30), 6px -6px RVB (187 162,2), 7px -6px RVB (214 189,29), 7px -7px RVB (186 161,1), 8px -7px RVB (213 188 ,28), 8px -8px RVB (185 160,0), 9px -8px RVB (212 187,27), 9px -9px RVB (184 159,0) ;

Blok1 (largeur : 70 % ; largeur maximale : 550 px ; marge : 10 px auto ; remplissage : 1em ; ombre de la boîte : 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) encart ; )

Résultat :

Blok1 (largeur : 30 % ; largeur maximale : 550 px ; marge : 2em auto ; remplissage : 1em ; arrière-plan : #DADADA ; ombre de la boîte : 6px 6px #BBBBBB, 12px 12px #919191 ; )

Résultat :

Blok1 (largeur : 30 % ; marge : 0 auto ; remplissage : 2em ; box-shadow : 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Résultat :

En utilisant une ombre, vous pouvez créer un beau cadre.

Beau cadre utilisant les propriétésboîte- ombre

Blok1 (largeur : 20 % ; largeur maximale : 250 px ; marge : 0 auto ; remplissage : 1em ; bordure : 2 px en pointillés #999 ; ombre de la boîte : 0 0 0 1px #999, encart 0 0 0 1px #999 ; )
Résultat
:

Blok1 (largeur : 30 % ; largeur maximale : 250 px ; marge : 2em auto ; remplissage : 4em ; arrière-plan : #dcc005 ; box-shadow : 0 0 4em 4em #fff inset ; )
Résultat
:

Blok1 (largeur maximale : 250 px ; marge : 0 auto ; remplissage : 1em ; rayon de bordure : 10 px ; arrière-plan : rgb(100 100 100) dégradé radial (cercle à 0 0, rgba(255 255 255,.65), rgba(255 255 255, .35) ); box-shadow : encart rgba(0,0,0,.5) -3px -3px 8px, encart rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px ; )
Résultat
:


 
 
 
 
 
 
 

 

 
site web
 

 





Résultat
:

Ces magnifiques effets peuvent être obtenus en utilisant des ombres en CSS.  Créez quelque chose de nouveau et d'original, tout est entre vos mains.  Vous avez les connaissances et les capacités. 
Et un de ces jours, je publierai un article sur la façon de créer sans utiliser Photoshop.  Alors, soyez au centre des choses et abonnez-vous aux mises à jour de mon blog.  Ne manquez pas un sujet qui vous intéresse.  Et bien ça y est, bonne chance !!!
Les ombres régulières sont faciles à mettre en œuvre en utilisant box-shadow ou text-shadow.  Mais que se passe-t-il si vous avez besoin de créer des ombres internes ?  Cet article décrit comment créer ces ombres avec seulement quelques lignes de code.
Syntaxe
Tout d'abord, examinons les deux principales manières d'implémenter les ombres en CSS. 
boîte ombre
Conception boîte ombre contient plusieurs significations différentes : 
Décalage horizontal Et décalage vertical- déplacement horizontal et vertical, respectivement.  Ces valeurs indiquent dans quelle direction l'objet projettera son ombre :
Rayon de flou Et rayon de propagation un peu plus compliqué.  Quelle est la différence?  Regardons un exemple avec deux éléments, où les valeurs rayon de flou différer:
Le bord de l’ombre est simplement flou.  Avec des valeurs différentes rayon de propagation nous voyons ce qui suit :
Dans ce cas, on voit que l’ombre est dispersée sur une grande surface.  Si vous ne spécifiez pas de valeur rayon de flou Et rayon de propagation, alors ils seront égaux à 0.
ombre de texte
La syntaxe est très similaire à boîte ombre:
Les significations sont similaires, mais pas ombre étendue.  Exemple d'utilisation :
Encart dans l'ombre de la boîte
Pour « retourner » l'ombre à l'intérieur de l'objet, vous devez ajouter encart en CSS : 
Une fois que vous avez compris la syntaxe de base de l'ombre de la boîte, il est très facile de comprendre comment implémenter les ombres internes.  Les valeurs sont toujours les mêmes, vous pouvez ajouter de la couleur (RVB en hexadécimal) :
La couleur est au format RVB, la valeur alpha est responsable de la transparence de l'ombre :
Images avec des ombres
Ajouter une ombre intérieure à une image est un peu plus difficile que d'ajouter une ombre ordinaire div.  Pour commencer, voici le code image habituel : 
 
 
Il est logique de supposer que vous pouvez ajouter une ombre comme ceci :
Img ( box-shadow: encart 0px 0px 10px rgba(0,0,0,0.5); )
Mais l'ombre n'est pas visible :
Il existe plusieurs façons de résoudre ce problème, chacune ayant ses avantages et ses inconvénients.  Examinons-en deux.  La première consiste à envelopper l'image dans un format régulier div:
 

 

 
Div ( hauteur : 200px ; largeur : 400px ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9); ) img ( hauteur : 200px ; largeur : 400px ; position : relative ; z-index : -2 ; )
Tout fonctionne, mais nous devons ajouter un peu de balisage HTML et CSS supplémentaire.  La deuxième façon consiste à définir l'image comme arrière-plan du bloc souhaité :
 

 

 
Div ( hauteur : 200 px ; largeur : 400 px ; arrière-plan : url(http://lorempixum.com/400/200/transport/2) ; box-shadow : encart 0px 0px 10px rgba(0,0,0,0.9) ; )
Voici ce qui peut arriver lors de l’utilisation d’ombres intérieures :
Encart dans l'ombre du texte
Pour implémenter une ombre de texte interne, ajoutez simplement au code encart ne marche pas: 
Pour résoudre, appliquez d'abord à l'en-tête h1 Définissez un arrière-plan sombre et une ombre claire :
H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre du texte : 0px 2px 3px rgba(255,255,255,0.5); )
Voici ce qui se passe :
Ajouter un ingrédient secret clip d'arrière-plan qui coupe tout ce qui dépasse du texte (sur fond sombre) :
H1 ( couleur d'arrière-plan : #565656 ; couleur : transparent ; ombre de texte : 0px 2px 3px rgba(255,255,255,0.5) ; -webkit-background-clip : texte ; -moz-background-clip : texte ; background-clip : texte ; )
Il s’est avéré presque exactement ce dont nous avions besoin.  Maintenant, nous assombrissons juste un peu le texte (alpha), et le résultat est :